drop down menu css - html

Question

I have a menu with html and css horizantal and I want to add a vertical menu only for the last element of the menu "parameters"
here is the html code :
<div id="templatemo_menu">
<ul>
<li><span class="home">Acceuil</span></li>
<li><span class="commandes">Commandes</span></li>
<li><span class="users">Utilisateurs</span></li>
<li><span class="gallery">Message</span></li>
<li><span class="contact">Messages</span></li>
<li>
<span class="contact2">Paramétres</span>
<ul class="sousmenu">
<li>CSS</li>
<li>Graphic design</li>
<li>Development tools</li>
<li>Web design</li>
</ul>
</li>
</ul>
</div>
and here is the css code :
#templatemo_menu {
width: 980px;
height: 110px;
margin: 0 auto;
background: url(images/templatemo_menu.jpg) repeat-x;
}
#templatemo_menu ul {
margin: 0;
padding: 1px 40px 0 40px;
list-style: none;
}
#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a {
float: left;
display: block;
width: 120px;
height: 95px;
padding: 15px 0 0 0;
margin-right: 5px;
text-align: center;
font-size: 16px;
text-decoration: none;
color: #163142;
font-weight: bold;
outline: none;
background: url(images/templatemo_menu_item.jpg) no-repeat;
}
#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #000000;
background: url(images/templatemo_menu_hover.jpg) no-repeat;
}
#templatemo_menu ul li a .home {
display: block;
height: 20px;
padding: 55px 0 0 0;
background: url(images/home_48.png) no-repeat center top;
}
#templatemo_menu ul li a .aboutus {
display: block;
height: 20px;
padding: 55px 0 0 0;
background: url(images/new_order2.png) no-repeat center top;
}
#templatemo_menu ul li a .commandes {
display: block;
height: 20px;
padding: 55px 0 0 0;
background: url(images/commandes_v1.png) no-repeat center top;
}
#templatemo_menu ul li a .users {
display: block;
height: 20px;
padding: 55px 0 0 0;
background: url(images/user.png) no-repeat center top;
}
#templatemo_menu ul li a .services {
display: block;
height: 20px;
padding: 55px 0 0 0;
background: url(images/historiqueCommandes2.png) no-repeat center top;
}
#templatemo_menu ul li a .news {
display: block;
height: 20px;
padding: 55px 0 0 0;
background: url(images/newspaper_48.png) no-repeat center top;
}
#templatemo_menu ul li a .gallery {
display: block;
height: 20px;
padding: 55px 0 0 0;
background: url(images/newMessage.png) no-repeat center top;
}
#templatemo_menu ul li a .contact {
display: block;
height: 20px;
padding: 55px 0 0 0;
background: url(images/mail_48.png) no-repeat center top;
}
(it seems a bit long because I made ​​a template of the website)
so I tried this code css (a drop-down menu) but it not work, I tried to add and delete attributes but no result:
#templatemo_menu .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#templatemo_menu .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#templatemo_menu .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: transparent url("fondTR.png") repeat;
}
#templatemo_menu .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
#templatemo_menu li:hover > .sousMenu { display: block; }
do you have any idea,thanks

Answer 1

Either in your HTML replace <ul class="sousmenu"> with <ul class="sousMenu">
OR
In your css change .sousmenu with .sousMenu (Everywhere).
Do what you like, but make them equal in cases. And see the difference it makes.