Jugando entre diseñadores

He visto muchos menús desplegables por internet.. muy chulos, pero muy complicados para mi gusto, asi que voy a explicar como hacer un menu horizontal desplegable sencillito y funcional, tán solo con html y css.

Lo primero es la estructura, para ella usaré una lista, asi queda todo bien recogidito:

<ul id="menu-horizontal">
<li><a href="#" title="Texto">Texto</a></li>
<li><a href="#" title="Texto">Texto</a></li>
<li><a href="#" title="Texto">Texto</a>
<ul>
<li><a href="#" title="Texto">Texto</a></li>
<li><a href="#" title="Texto">Texto</a></li>
</ul>
</li>
<li><a href="#" title="Texto">Texto</a></li>
<li><a href="#" title="Texto">Texto</a></li>
</ul>

La cosa es así: el <ul> es el menú en sí, cada <li> es un botón del menú y el <ul> dentro del <li> es desplegable de ese botón. ¿Me se entiende? xD

Vale, ahora voy a aplicarle un poco de estilo para que quede el menu en horizontal, ya que por defecto las listas son verticales. Se consigue fácil, agregandole a los elementos de la lista el atributo de flotante:

ul#menu-horizontal li {
float: left;
display: inline;
position: relative;
}

Y ahora que es horizontal, voy a ocultar el submenú, ya que no quiero que aparezca aún, solo se tiene que mostrar cuando pase el ratón por encima del botón que tiene submenu. El css en cuestión:

ul#menu-horizontal ul {
display: none;
position: relative;
top: 24;
left:0;
margin:0;
padding:0;
background:#FFFFFF;
}

ul#menu-horizontal ul li {
display: block !important;
}

ul#menu-horizontal li:hover ul{
display: none;
}

ul#menu-horizontal li:hover ul{
display: block;
}

Y.. perfecto! Ya funciona nuestro menu desplegable y horizontal, pero nos queda un paso. Hacerlo bonito. Para ello aplicamos un poco de estilo por aquí..

#menu-horizontal {
width:500px;
margin:0 auto;
}

#menu-horizontal li {
margin:0 1px;
width:98px;
min-height:19px;
text-align:center;
background:#BBB;
list-style:none;
padding:2px 0;
}

/* y otro poquito por aquí.. */

#menu-horizontal li:hover {
background:#C5014F;
}

#menu-horizontal li a {
font:bold 11px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}

#menu-horizontal li ul li{
float:none;
width:98px;
margin:1px 0;
}

Y.. apañao.

No es para decir: Uy que bruto que bonito que está, pero todo es empezar

Actualizado 29-01-2009: He modificado las propiedades de #menu-horizontal ul para que funcione correctamente en IE7 gracias a los comentarios de José Rico y Ring

Twittea esto Guardalo en Delicious Compartelo en Facebook

Articulos relacionados

• CSS: Trabajando con espacios en blanco
• Cheat Sheet, descúbrelo de un vistazo
• CSS: Dar estilo a nuestros formularios sin tablas ni párrafos
• Javascript: Ocultar/mostrar campos en un formulario.

• views: 13
• jd_tweet_this: yes
• tt_auto_tweet: false
• tweet_this_url: http://b6qag.th8.us