A continuación dejo un ejemplo de como realizar un menú con CSS3 usando la sintaxis de HTML5. Se utiliza el formato estándar para la estructura del HTML, con listas desordenadas. Y para CSS el moderno estilo Flex. De esta forma podrás tener un menú desplegable sin saber Javascript utilizando todo el potencial de las hojas de estilos.
DEMO
HTML5
<nav class="menuCSS3">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Empleados</a>
<ul>
<li><a href="#">Juan</a></li>
<li><a href="#">Paco</a></li>
<li><a href="#">Ramón</a></li>
<li><a href="#">María</a></li>
</ul>
</li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contacto</a>
<ul>
<li><a href="#">Email</a></li>
<li><a href="#">Mapa</a></li>
</ul>
</li>
</ul>
</nav>
CSS3
.menuCSS3 ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.menuCSS3 a {
display: block;
padding: 2em;
background-color: #F9B53C;
text-decoration: none;
color: #191C26;
}
.menuCSS3 a:hover {
background-color: #CC673B;
}
.menuCSS3 ul li ul {
display: none;
}
.menuCSS3 ul li a:hover + ul, .menuCSS3 ul li ul:hover {
display: block;
}
Actualización
Dispones de otros ejemplos de menús con otras configuraciones.
- Menú completo Responsive Design para Escritorio y Móvil/Celular.
- Menú básico para Escritorio.
- Menú en CSS Escritorio y Móvil/Celular.
{{ comments.length }} comentarios