-
Horizontal 2 niveles 3º opción
<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 id="uno">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 1.1</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 id="dos">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.2</a></li>
<li><a href="#">Opción 2.1</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 id="tres">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.1</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 id="cuatro">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.1</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 id="cinco">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>CSS
/*--------- Menu CSS --------------*/
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 200px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#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: 160px;
padding: 6px 0px 8px 0px;
border-bottom-color: #000;
}
#menu ul li ul li a:hover {border-bottom-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul#uno {top: -58px!important; top: -89px;}
ul#dos {top: -145px!important; top: -176px;}
ul#tres {top: -87px!important; top: -118px;}
ul#cuatro {top: -116px!important; top: -147px;}
ul#cinco {top: -87px!important; top: -118px;}