下拉菜单CSS

Question

我有一个带有html和css horizantal的菜单，我只想为菜单“ parameters”的最后一个元素添加一个垂直菜单

这是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">替换为<ul class="sousMenu">

要么

在您的css中，用.sousMenu （任何地方）更改.sousmenu 。

做自己喜欢的事，但要使它们相等。 并查看其差异。