A la hora de crear menús son muy diversos los caminos que pueden tomarse, puede crearse desde una tabla con enlaces hasta complejas animaciones en flash, sin embargo yo soy partidario del uso de listas para la creación de menús, esto porque son predecibles y fáciles de controlar.
A continuación un ejemplo muy simple para la creación de un menú desplegable basado en listas y css
Puedes ver el ejemplo en acción aquí: menú css
Código html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu de ejemplo</title>
<style>
@import url(menu.css);
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">menu nivel 1</li>
<li><a href="#">menu nivel 1</a>
<ul>
<li><a href="#">menu nivel 2</a></li>
<li><a href="#">menu nivel 2</a></li>
<li><a href="#">menu nivel 2</a></li>
<li><a href="#">menu nivel 2</a>
<ul>
<li><a href="#">menu nivel 3</a></li>
<li><a href="#">menu nivel 3</a></li>
<li><a href="#">menu nivel 3</a>
<ul>
<li><a href="#">menu nivel 4</a></li>
<li><a href="#">menu nivel 4</a></li>
<li><a href="#">menu nivel 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu nivel 2 </a></li>
</ul>
</li>
<li><a href="#">menu nivel 1</a>
<ul>
<li><a href="#">menu nivel 2 </a></li>
<li><a href="#">menu nivel 2 </a></li>
<li><a href="#">menu nivel 2 </a></li>
<li><a href="#">menu nivel 2 </a></li>
<li><a href="#">menu nivel 2 </a></li>
</ul>
</a></li>
<li><a href="#">menu nivel 1</a></li>
<li><a href="#">menu nivel 1</a></li>
<li><a href="#">menu nivel 1</a></li>
</ul>
</div>
</body>
</html>
El CSS:
#nav * {
margin:0;
padding:0;
}
/* nivel 0*/
#nav ul {
list-style: none;
float:left;
position:relative;
display:block;
}
#nav ul li {
float:left;
display:inline;
border:1px solid #424242;
padding:3px 6px;
}
#nav ul li ul {
position:absolute;
left:-9999px;
}
#nav ul li:hover ul {
left:auto;
float:left;
width:177px;
margin-top:4px;
margin-left:-7px;
}
#nav ul li ul li {
display: list-item;
float:left;
width:165px;
margin-top:-1px;
}
#nav ul li:hover ul li ul {
position:absolute;
left:-9999px;
}
#nav ul li:hover ul li:hover ul, #nav ul li:hover ul li:hover ul li:hover ul {
left:178px;
margin:-1.4em 0 0 0;
}
#nav ul li:hover ul li:hover ul ul {
position:absolute;
left:-9999px;
}
/* retoques - estetica */
#nav ul li {
background:#565656;
}
#nav ul li a {
color:#dddddd;
font-size:0.9em;
font-weight:bold;
display:block;
text-decoration:none;
}
la idea con este menú es sentar las bases para realizar menús controlados a través de css y utilizando listas, más adelante ire dandole mejor forma a este ejemplo para aplicarlo a menús desplegables en wordpress y Joomla.
Excelente blog y muy buen post, te felicito.
Un saludo.
Gracias Mr Pagina Web
Ando corto de tiempo, pero seguro que si te pasas en unos días encuentras algunos buenos artículos.