问题描述:

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

网友答案:

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.

相关阅读:
Top