CSS Menús y Submenús (CSS + HTML)

En el siguiente post, vamos a ver un pequeño ejemplo de como montar un menú y submenú mediante HTML Y CSS.

Explicación:

Los pasos que vamos a seguir son sencillos, primero vamos a montar un menú via tag UL y LI, donde añadiremos una nueva lista dentro de cualquier punto de la lista principal. Algo así como construir un pequeño árbol de diagrama con las diferentes opciones que tendrá el menú. De tal manera que nuestro menú tendrá la siguiente estructura.

• LINK1
  • LINK1.1.
  • LINK1.2
• LINK2
  • LINK2.1
  • LINK2.2
• LINK3
• LINK4

Fijaros que la primera lista es la que contiene los LINKS DEL 1 AL 4, y en link1 y en link2 añadimos una sublista a punto.

El código quedaría más o menos así, si bien quiero que os fijeis en el ID del DIV: DIV=”menu_wrapper”

<DIV id=”menu_wrapper”>
<ul>
<li><a href=”#”>Link 1</a>
<ul>
<li><a href=”#”>Link 1.1</a></li>
<li><a href=”#”>Link 1.2</a></li>
</ul>
</li>
<li><a href=”#”>Link 2</a>
<ul>
<li><a href=”#”>Link 2.1</a></li>
<li><a href=”#”>Link 2.2</a></li>
</ul>
</li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
</ul>
</DIV>

Bueno, aquí el secreto es el CSS, ya que si habéis copiado el código anterior, quedará una lista vertical y se parecerá a un menú como un huevo a una castaña. Así que lo siguiente será trabajarse el CSS de la siguiente manera.

Partiremos del ID del contenedor del menú, en este caso menu_wrapper, y a partir de ahí y de sus elementos iremos definiendo cada particularidad.

#menu_wrapper{
top:250px;
clear:both;
position:relative;
float:left;
margin-left:50px;
border-bottom:1px solid #000;
border-right:1px solid #000;
width:70%;
font-family:arial,verdana, geneva, sans-serif;
border-radius:10px;
background:#ffffff;
border-style:solid;
border-color:grey;
Padding:10px;
}
#menu_wrapper ul{
/*el margin y el padding hacen que el submenú esté alienado al principio del menú correspondiente”*/
margin:0;
padding:0;
list-style:none; /* le quita los puntos de la lista*/
float:right;
position:relative;
right:50%;
}
#menu_wrapper ul li{
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
width:100px;
}
#menu_wrapper ul ul {
display:none;
position:absolute;
width:100%;
right:auto; /*resets del ul superior */
}
#menu_wrapper ul li a{
display:block;
margin:0;
padding: .6em .5em .4em;
font-size:1em;
line-height:1em;
background:Grey;
text-decoration:none;
color:#444;
font-weight:bold;
border-bottom:1px;
}
#menu_wrapper ul ul li {
left:auto;  /*reset del li superior */
margin:0; /* Reset de margin */
clear:left;
width:100%;
background:orange;
}
#menu_wrapper ul ul li a:hover,
#menu_wrapper ul li.active ul li a:hover,
#menu_wrapper ul li:hover ul li a:hover,
#menu_wrapper ul li.hover ul li a:hover {
background:#36f;
color:#fff;
}
#menu_wrapper ul ul li a,
#menu_wrapper ul li.active li a,
#menu_wrapper ul li:hover ul li a,
#menu_wrapper ul li.hover ul li a { /* IE6 */
font-size:.8em;
font-weight:normal;
background:#eee;
color:#444;
line-height:1.4em;
border-bottom:1px solid #ddd;
}
#menu_wrapper ul li a:hover{
background:#36f;
color:#fff;
border-bottom:1px solid #03f;
}
#menu_wrapper ul li:hover a{
background:orange;
color:#fff;
border-bottom:1px solid #03f;
}
#menu_wrapper ul li:hover ul,
#menu_wrapper ul li.hover ul { /* IE6 */
display:block;
background:orange;

}