Ajouter des Sous-Sous-Menus CSS menu avec des Sous-Menus
J'ai un CSS manu que j'utilise avec des sous-menus. Je me demandais comment j'allais sur l'ajout d'un sous-sous-menu pour elle. Par exemple, j'ai passez la souris sur l'élément du menu principal et le sous-menu pop-up, puis j'ai passez la souris sur l'élément de sous-menu et un autre sous-menu pop-up. Voici le JS Fiddle que j'utilise maintenant:
http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/
Voici le CSS, je suis en utilisant:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
}
.menu ul{
background:#006633;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#006633 url("../images/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #003f20 url("../images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#006633;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}Voici le code HTML que je suis en utilisant:
<div class="menu">
<ul>
<li><a href="#" target="_self" >Main Item 1</a></li>
<li><a href="#" target="_self" >Main Item 2</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
<li><a href="#" target="_self" >Main Item 3</a></li>
<li><a href="#" target="_self" >Main Item 4</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
</ul>
</div>
InformationsquelleAutor Jeff Thomas | 2011-06-30
Vous devez vous connecter pour publier un commentaire.
Voici comment je l'approche de ce que vous recherchez: http://jsfiddle.net/Dg3yQ/26/
J'ai pris quelques libertés sur la révision de la CSS. La version révisée de la CSS réduit le code par un couple de centaines de personnages et je crois qu'il accomplit ce que vous avez prévu. J'espère que cette aide.
MODIFIÉ: Ajout d'une rationalisation exemple de code avec des commentaires de cette réponse sur la façon dont ces sous-menus peut être accompli.
CSS:
HTML:
Si vous souhaitez utiliser les transitions CSS (qui ne fonctionne pas sur les propriété d'affichage), vous pouvez remplacer l'affichage de l'opacité à la place. À composer avec le fait que les éléments maintenant la place même caché, vous pouvez simplement mettre le menu dans un autre div qui est en position absolue et la plus élevée dans l'ordre-z (dont un menu devrait être de toute façon). Alors rien ne sera dans la façon que le menu sera le seul élément dans la couche supérieure.
Voici l'exemple d'origine modifié par moi pour les transitions CSS:
CSS:
HTML: