menú desplegable css

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><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>

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