Muy buenas:
Siguiendo el
ejemplo he intentado hacer un menú desplegable (primer nivel en horizontal y segundo desplegable hacia abajo).
Antes utilizaba una tabla en lugar de una lista para el primer nivel y me funcionaba bien, pero no consigo que marche. ¿Qué estoy olvidando u omitiendo?
HTML:
Código:
<div id="cabecera">
<div id="menu">
<ul>
<li class="nivel1"><a class="nivel1" href="…">Menú 1</a></li>
<li class="nivel1"><a class="nivel1" href="…">Menú 2</a>
<ul>
<li><a href="…">Opción 2.1</a></li>
<li><a href="…">Opción 2.2</a></li>
</ul>
</li>
<li class="nivel1"><a class="nivel1" href="…">Menú 3</a>
<ul>
<li><a href="…">Opción 3.1</a></li>
<li><a href="…">Opción 3.2</a></li>
<li><a href="…">Opción 3.3</a></li>
<li><a href="…">Opción 3.4</a></li>
<li><a href="…">Opción 3.5</a></li>
</ul>
</li>
<li class="nivel1"><a href="…" class="nivel1">Menú 4</a></li>
</ul>
</div>
</div>
CSS:
Código:
/* Menú de navegación */
#cabecera #menu {float: right; clear: both;}
#cabecera #menu ul {margin: 0; padding: 0; list-style-type: none;}
#cabecera #menu ul li.nivel1 {float: left;}
#cabecera #menu ul li a {display: block; position: relative;
font-weight: bold; font-size: 11px; padding: 0 5px;}
#cabecera #menu ul li:hover {position: relative;}
#cabecera #menu ul li a:hover, #cabecera #menu ul li:hover a.nivel1 {
position: relative;}
#cabecera #menu ul li a.nivel1 {display: block!important; display: none;
position: relative;}
#cabecera #menu ul li ul {display: none;}
#cabecera #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute; left: 0px;}
#cabecera #menu ul li ul li a:hover {position: relative;}
Gracias y un saludo.