Eklablog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

Tutorial, CSS, HTML

 

3 niveles
Fuente: http://web.tursos.com/como-hacer-un-menu-desplegable-multinivel-usando-solo-css/

<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>

CSS

body, ul, li {
margin:0;
padding:0;
}
ul {
list-style:none;
display:inline-block;
}
ul li {
float:left;
}
ul#dropdownmenu {
margin:none;
list-style:none;
height:40px;
width:100%;
background:#C1F2FB;
border-radius: 5px;
border-bottom: 4px solid #0FA7C1;
}
ul#dropdownmenu li {
height:40px;
}
ul#dropdownmenu li a {
display:block;
padding:8px;
height:24px;
color:#000;
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:18px;
text-decoration:none;
}

ul#dropdownmenu li a:hover {
background:#0D8FA5;
border-radius: 5px;
border: 1px dotted #0FA7C1;
}

ul#dropdownmenu li ul {
display:none;
}

ul#dropdownmenu li:hover ul {
display:block;
background:#84E5F6;
border-radius: 5px;
border: 1px dotted #0FA7C1;
position:absolute;
}
ul#dropdownmenu li:hover ul li {
float:none;
position:relative; /* Gracias por el consejo, Álex */
background:#fff;
}
ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}
ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;

}
Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article