FAQ's CSS: Menú desplegable 100% CSS

kari030173 · #1 (**permalink**) 26/05/2009, 05:04

Hola!!

He adaptado un menu de los ejemplos que Mikmoro ha facilitado. Pero algo debo haber borrado que no tenia que borrar, ya que cuando trato de clicar sobre el menu nivel 2, éste desaparece. No se si me explico. Uf! ¿Alguien sabe cual es el error? Muchas gracias.

El codigo HTML y CSS es:

HTML

<head>
<title>Menus desplegable solo CSS ejemplo 12</title>
<link rel="stylesheet" href="css/menu-12.css" type="text/css" />


</head>
<body>
<div id="menu">
<ul>
<li class="nivel1">INICIO</li>
<li class="nivel1"><a href="#" class="nivel1">¿QUIÉNES SOMOS?</a></li>
<li class="nivel1"><a href="#" class="nivel1">¿QUÉ HACEMOS?</a></li>
<li class="nivel1"><a href="#" class="nivel1">PROYECTOS</a>
<ul class="nivel2">
<li><a href="#">VIVIENDAS</a></li>
<li><a href="#">LOCALES</a></li>
<li><a href="#">OFICINAS</a></li>
</ul></li>

<li class="nivel1"><a href="#" class="nivel1">CONTACTO</a>
</li>
</ul>
</div>
</body>
</html>

[COLOR="rgb(255, 140, 0)"]y el CSS:[/COLOR]

body {
background-color: #000000;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
margin-top: 100px;
text-align: center;
}

#menu {
float: left;
font-size: 11px;
margin-top: 20px;
text-align: left;
}

#menu ul {
list-style-type: none;
}

#menu ul li a {
background-color: #000000;
border: solid 0px #FFFFFF;
color: #FFD700;
display: block;
padding: 0px;
position: relative;
text-decoration: none;
}

#menu ul li a.nivel1, #menu ul li a.nivel2 {
display: block!important;
display: none;
position: relative;
}

#menu ul li a.nivel2, #menu ul li a.nivel2ie {
color: #000000;
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #000000;
color: #F0E68C;
position: relative;
}

#menu ul li ul {
display: none;
}

#menu ul li ul li a {
}

#menu ul li ul li a:hover {
border-top-color: #000000;
position: relative;
}

#menu ul li.nivel1 {
float: left;
margin-right: 1px;
margin-right: 20px;
}

#menu ul li:hover {
position: relative;
}

#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{
display: block;
left: -40px;
line-height: 20px;
padding-top: 8px;
position: absolute;
}

Mikmoro · #2 (**permalink**) 26/05/2009, 05:16

Hola. Saber si has cambiado algo que no deberías es fácil comparando tu modificación con el original. Nadie podrá adivinar si hay algo cambiando con menos trabajo del que te cueste a ti hacer la comparación, evidentemente.