Tecnología y Coaching para Emprendedores

Cómo crear un submenú horizontal con CSS

css

Cuando creamos un menú desplegable, la opción más común es utilizar menús verticales. Pero muchas veces el diseño de la web no admite bien un menú vertical, pero sí uno horizontal.

En este artículo veremos como crear un submenú horizontal como el siguiente:

Demo

 

En este caso concreto, utilizamos HTML5, que admite la etiqueta <nav>. En caso de utilizar xHTML, simplemente sustitúyela por <div id=”nav”> y en el CSS por #nav.

Primero de todo, creamos el HTML correspondiente:
[cc lang=’html’ ]

[/cc]

Seguidamente, le damos forma con CSS:

[cc lang=’css’]

nav {
width:700px;
height:28px;
border-right: 2px solid #525252;
float:right;
margin-right:18px;
}

#navbar {
position: absolute;
margin: 0 auto;
margin-left:90px;
}

#navbar li {
list-style: none;
float: left;
}

#navbar li a {
display: block;
float:left;
color:#2a2828;
font-size:19px;
font-weight:bold;
letter-spacing:1px;
padding:5px 23px 0 23px;
border-left: 2px solid #525252;
}

#navbar li a:hover {
background-color:#eaeaea;
}

#navbar li ul {
display: none;
}

#navbar li ul a {
border:none;
font-weight:normal;
}

#navbar li ul a:hover {
background-color:#eaeaea;
}

#navbar li ul li#sub1, #navbar li ul li#sub2 {
border-top:1px dotted #525252;
border-right:1px dotted #525252;
}

#navbar li ul li#sub3 {
border-top:1px dotted #525252;
}

#navbar li:hover ul {
position: absolute;
display: inline;
margin-top: 28px;
}

#navbar li:hover ul#draw_menu {
left: -31px;
}

#navbar li:hover ul#model_menu {
left: 75px;
}

#navbar li:hover ul#move_menu {
left:151px;
}
[/cc]

En este ejemplo, hemos utilizado diferentes ids para cada una de las entradas del submenú con el objetivo de poder modificar su posición. Deseo que os sea útil en vuestro trabajo de diseño web.