Foros del Web » Creando para Internet » CSS »

FAQ's CSS: Menú desplegable 100% CSS

Estas en el tema de FAQ's CSS: Menú desplegable 100% CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/05/2009, 06:04
 
Fecha de Ingreso: mayo-2009
Mensajes: 2
Antigüedad: 8 años, 6 meses
Puntos: 0
FAQ's CSS: Menú desplegable 100% CSS

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" />
<!--[if IE]><style>#menu ul li ul li a{margin-bottom:-1px;border-top-color: #fff;} #menu ul.nivel2{margin-top: -1px;}</style><![endif]-->
<!--[if IE 7]><style>#menu ul li ul li.nivel2:hover{margin-bottom:-2px;}</style><![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1">INICIO</li>
<li class="nivel1"><a href="#" class="nivel1">¿QUI&Eacute;NES SOMOS?</a></li>
<li class="nivel1"><a href="#" class="nivel1">¿QU&Eacute; 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;
}
  #2 (permalink)  
Antiguo 26/05/2009, 06:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: FAQ's CSS: Menú desplegable 100% CSS

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.
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 09:35.