下拉菜單CSS

Question

我有HTML和CSS horizantal一個菜單，我想添加一個垂直菜單隻對菜單中的「參數」

這裏的最後一個元素是html代碼：

<div id="templatemo_menu"> 
         <ul> 
          <li><a href="/impression/faces/vues_admin/acceuil_admin.xhtml" class="current"><span class="home">Acceuil</span></a></li> 
          <li><a href="/impression/faces/vues_admin/touslesCommandes.xhtml" class="commandes"><span class="commandes">Commandes</span></a></li> 
          <li><a href="/impression/faces/vues_admin/utilisateurs.xhtml"><span class="users">Utilisateurs</span></a></li> 
          <li><a href="/impression/faces/vues_admin/newMessage.xhtml"><span class="gallery">Message</span></a></li> 
          <li><a href="/impression/faces/vues_admin/historiqueMessages.xhtml"><span class="contact">Messages</span></a></li> 
          <li> 
           <a href="/impression/faces/vues_admin/historiqueMessages.xhtml"><span class="contact2">Paramétres</span></a> 
           <ul class="sousmenu"> 
            <li><a href="#">CSS</a></li> 
            <li><a href="#">Graphic design</a></li> 
            <li><a href="#">Development tools</a></li> 
            <li><a href="#">Web design</a></li> 
           </ul> 

          </li> 
         </ul>  

        </div> 

這裏是CSS代碼：

#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; 
} 

（似乎有點長，因爲我做了一個網站的模板）

所以我想這個代碼的CSS（下拉菜單），但它不工作，我嘗試添加和刪除屬性，但沒有任何結果：

#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; } 

你有什麼想法，謝謝

Answer 1

無論是在你的HTML與<ul class="sousMenu">

OR

更換<ul class="sousmenu">在你的CSS改變.sousmenu與.sousMenu（無處不在）。

做你喜歡的事情，但在案件中讓他們平等。並看到它的差異。