COMO HACER UN MEN DESPLEGABLE EN HTML

Los mens desplegables permiten obtener una vista clara y jerarquizada de todas las secciones
principales de una pgina web, como as tambin las subsecciones contenidas en cada una. Todo
lo que necesitas hacer para que aparezcan las subsecciones, es pasar el cursor del ratn sobre
las secciones principales. Puedes hacer un men desplegable usando solamente HTML y CSS.
PASOS PARA HACER UN MENU DESPLEGABLE EN HTML
Crea la seccin de navegacin. Normalmente es mejor usar <nav> para la barra de
navegacin de la vista general del sitio, <header> para secciones de enlaces ms pequeos y
especficos de una pgina o <div> cuando aparentemente ninguna de las otras opciones encaja
mejor.[1][2] Coloca esta seccin dentro de un elemento <div> de modo que puedas aplicarle
estilo tanto al contenedor como as tambin al mismo men.
<div>
</nav>
<nav>
</div>
Dale a cada seccin un atributo de clase. El atributo de clase lo usars ms tarde, para
aplicarle estilo a estos elementos usando CSS. Dale un atributo de clase al contenedor y otro
al men en forma separada.
<div
class="nav <nav
class="nav </div>
wrapper">
menu">

</nav>
Agrega una lista de tems de men. La lista desordenada (<ul>) contiene los tems del
men superior (tems de la lista <li>), sobre los cuales el usuario podr pasar el puntero del
ratn para ver los mens desplegables. Agrega la clase "clearfix" en tu elemento de la lista, la
usars ms adelante, cuando desarrolles la hoja de CSS.
<div
class="nav <li>Inicio</li>
</li>
wrapper">
<li>Colaboradores
</ul>
<nav
class="nav </li>
</nav>
menu">
<li>Contctenos
</div>
<ul class="clearfix">

Inserta enlaces. Si los tems de men del nivel superior tambin se vinculan con sus propias
pginas, inserta los enlaces correspondientes ahora. Incluso aunque no estn vinculados con
ningn otro sitio, incluye enlaces a un ancla inexistente (por ejemplo "#!") de modo que el
cursor del usuario cambie su apariencia. En este ejemplo, "Contctenos" no lleva a ningn
lugar, pero los otros dos mens s:
<div
class="nav <li><a
<li><a
wrapper">
href="/">Inicio</a></li
href="#!">Contctenos
<nav
class="nav>
</a>

<li><a

</li>
menu">
<ul class="clearfix">
href="/Colaboradores">
</ul>
Colaboradores</a>
</nav>
</li>
</div>

Crea sublistas para los tems del men desplegable. Una vez que hayas aplicado los
estilos, estas listas se convertirn en un men desplegable. Anida las listas dentro del tem de
la lista sobre el cual el usuario pasar el cursor. Incluye un atributo de clase y un enlace, tal
como lo hiciste anteriormente.
<div
class="nav <li><a
<ul class="sub-menu">
wrapper">
href="/">Inicio</a></li
<li><a
<nav
class="nav>
href="/jordan">Michael
<li><a
menu">
Jordan</a></li>
<ul class="clearfix">
href="/Colaboradores">
Colaboradores</a>

 <li><a
<ul class="sub-menu">
<li><a
href="/hawking">Steph
<li><a
href="/soporte">Servici
en Hawking</a></li>
o de soporte</a></li>
href="mailto:soportedee
</ul>
</ul>
rrores@empresa.com">
</li>
Reportar
un
</li>
error</a></li>
<li><a
</ul>
href="#!">Contctenos
</nav>
</a>
</div>

Abre tu hoja de estilos CSS. Agrega un vnculo a la hoja de estilos CSS en la seccin
"head" (encabezado) de tu documento HTML, si es que todava no lo has hecho. Este artculo
no cubre los aspectos bsicos de CSS, por ejemplo cmo establecer una fuente y un color de
fondo.
Agrega el cdigo "clearfix". Recuerdas la clase "clearfix" que agregaste en la lista del
men? Normalmente los elementos de un men desplegable tienen un fondo transparente y
empujan los dems elementos hacia otras direcciones. Puedes resolver este problema con un
rpido ajuste con CSS. Aqu tienes una solucin prctica y fcil, aunque no es compatible con
Internet Explorer 7 y versiones anteriores:[4]
.clearfix:after {
content: "";
display: table;
}
Crea el diseo bsico. Este cdigo ordenar tu men a lo ancho de la parte superior de la
pgina y ocultar los elementos del men desplegable. Esto es intencionalmente un ejemplo
limitado, para enfocarse solo en el cdigo relevante. Despus puedes mejorarlo agregndole
propiedades adicionales de CSS, como por ejemplo, "padding" (relleno) y "margin" (margen).
.nav-wrapper {
display:inline-block;
}
width:100%;
}

background: #008B8B;
.sub-menu {

}
position:absolute;

.nav-menu {
display:none;
position:relative;
background: #555;

Haz que aparezcan los tems desplegables al pasar el cursor. Los elementos de la lista
desplegable actualmente estn configurados para no mostrarse. Aqu vers cmo hacer
aparecer una sublista completa al pasar el cursor sobre la lista a la que pertenece:

.nav-menu ul li:hover >

display:block;
}
ul {

 Nota: si los tems del men desplegable conducen a mens adicionales (controles flotantes),
todas las propiedades que agregues aqu los afectarn a todos ellos. Si quieres que el estilo
se aplique solamente al primer nivel de mens desplegables, utiliza ".nav-menu > ul".

Ajusta el relleno, el fondo y otras propiedades. Tu men ahora funcionar, pero sera
bueno hacerle un tratamiento de belleza. Si no ests familiarizado con las propiedades
bsicas de CSS, puedes buscar una gua en lnea sobre cmo programar en CSS. Utiliza estas
propiedades para hacer otros cambios en la apariencia y en la posicin de cada clase de
elemento.

Consejos:
Si quieres agregarle un men desplegable a una forma, con HTML 5 puedes hacerlo
fcilmente usando el elemento <select>.[7]
El enlace <a href="#"> deslizar la pgina hacia la parte superior, mientras que los enlaces
que hacen referencia a anclas inexistentes, por ejemplo <a href="#!"> no deslizarn la
pgina. Si te resulta desprolijo, puedes cambiar la apariencia del cursor utilizando CSS.
Si vas a copiar y pegar el cdigo de ejemplo, elimina todas las vietas.