Foros del Web » Creando para Internet » CSS »

Menú desplegable sólo CSS

Estas en el tema de Menú desplegable sólo CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/03/2010, 04:47
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 15 años
Puntos: 4
Menú desplegable sólo CSS

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.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!

Etiquetas: desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:44.