Bueno, he estado toqueteando el menú que hay en la web, pero me queda de la siguiente manera..
El html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Menu desplegable CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
El css
Código:
* {
margin: 0px;
padding: 0px; outline: 0;
}
html, body {
width: 100%;}
#menu {
text-align: center;
font-size: 0.7em;
width:665px;
margin: 20px auto;
}
#menu ul {
list-style-type: none;}
#menu ul li.nivel1 {
float: left;
width: 70px;
margin-right: 4px;
}
#menu ul li a {
padding:3px 8px 5px 8px;
margin:0 0 0 0;
text-decoration:none;
font-size:0.9em;
background:#666 url(images/corner.gif) top right no-repeat;
border-bottom:0px solid #ffffff;
border-left:1px solid #ffffff;
color:#FFF;
}
#menu ul li:hover {
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
text-decoration:none;
background:#d0d0d0 url(images/corner.gif) top right no-repeat;
border-bottom:1px solid #ffffff;
padding:3px 13px 5px 8px;
margin:0 0 0 0;
}
#menu ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {
width: 50px;
padding:3px 5px 5px 8px;;
border-top-color: #000;
}
#menu ul li ul li a:hover {
border-top-color: #000;
position: relative;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
.activemenu {
padding:3px 8px 5px 8px;
color:#ffffff;
margin:0 0 1px 0;
font-size:0.9em;
text-decoration:none;
background:#333 url(images/corner.gif) top right no-repeat;
}
Se monta todo, y se te pones encima del desplegable se hace mas grande aun.. he estado cambiando, pero nada, y no puedo tener el que esta activo de otro color.. aunque bueno, seria ir probando..
1 Saludo y Gracias!!