03/04/2009, 09:35
|
 | | | Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 15 años, 9 meses Puntos: 8 | |
| Respuesta: novato: alguien me ayuda a desplegar este menu horizontal
Más sencillo que todo eso. Los menus desplegables funcionan con listas anidadas que es exactamente lo que has hecho. Tu código HTML está bien..
Luego en la hoja de estilos tienes que crear las siguientes reglas:
# menu a {
display: block; /*en caso de que quieras añadir imágenes de fondo
width: ???px;
}
# menu li {
float: left; /*coloca los items del menú en horizontal
width: ???px;
}
#menu li ul { /*Esta es la lista anidada, el submenú desplegable
position: absolute;
width: ???px;
left: -1000 cm; /*para que desaparezca de la pantalla (puedes darle cualquier cantidad siempre que sea muuuucho)
}
#menu li:hover {
left: auto; /*para que vuelva a parecer el submenú al posarse sobre "consejos"
}
La anchura (width) depende de si todas las cajas y el desplegable tienan la misma. Si es así, procura darla a esos tres elementos.
Es básicamente lo mismo, o muy parecido, que lo que hacen en el ejemplo que mostrabas. Ahora te funcionará excepto en Explorer, que no admite pseudoclases a elementos que no sean anclas. Para que vaya bien, añade este código al <head>:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
Suerte
__________________
}8[/ |