CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

Ya hemos visto como crear un menú horizontal y otro vertical paso a paso. En esta entrada explicaremos a crear un menú horizontal con varios niveles y subniveles, mediante una estructura de listas estilizadas por CSS.

Mediante ul > li:hover ul podremos definir los submenús. Cuando creamos los menús normales, aplicamos display: block y le damos estilos, por ejemplo, un color de fondo (background: white;). La diferencia con los submenús es, que aplicamos los estilos a los elementos hijos (ul > li:hover).

Código HTML

<ul id="nav">

<li><span>Menu 1</span>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

</ul>

</li>

<li><span>Menu 2</span>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

</ul>

</li>

<li><span>Menu 3</span>

<ul>

<li><a href="#">Menu item 1</a></li>

<li><a href="#">Menu item 2</a></li>

<li><a href="#">Menu item 3</a></li>

</ul>

</li>

</ul>

Código CSS

#header { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
#header { height:120px; position:relative;

background: transparent url(header_bkg.png) repeat-x scroll top center;}

#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}

#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;

position:relative; padding:10px; width:100px;}

#nav > li:hover ul { display:block; }

#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }

#nav li ul { margin:0px; padding:0px; display:none;}

#nav li ul li { list-style-type:none; margin:10px 0 0 0;}

#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}

#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}

#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Estandarización

CSS 2.1 inválido (Propiedades únicamente validadas en CSS3).

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Conclusión

Este es un modo de crear menús con varios subniveles, sin necesidad de usar Javascript, a menos que deseemos darle efectos de animación. Una de las contras que tiene, es, que, para variar, no funciona en IE6.

Vía | Janko