-
2 niveles 6º opción
<!------------------------------------------------------------------------->
<div id="principal">Menú principal
<div id="menu">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
<li><a href="http://www.idplus.org">idplus.org</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 class="primera"><a href="#">Opción 2.1</a></li>
<li><a href="#">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="http://www.idplus.org">idplus.org</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 class="primera"><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</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 class="primera"><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="http://www.idplus.org">idplus.org</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 class="primera"><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>CSS
* { margin: 0px; padding: 0px; outline: 0; } html, body { width: 100%;} body { background: #366; font-family: Verdana, Arial, Helvetica, sans-serif; } #principal {width: 144px; color: #fff; background-color: #399; border: solid 1px #fff; padding: 8px; position: relative; margin: 20px; font-size: 0.9em; text-align: center; cursor: pointer; } #principal:hover {background-color: #0000CA;} #principal:hover #menu {display: block; } #menu { text-align: center; font-size: 0.85em; width: 320px; display: none; position: relative; padding-top: 10px; left: -9px; margin-bottom: -10px; } #menu ul { list-style-type: none;border: 0; } #menu ul li.nivel1 { width: 162px; } #menu ul li.primera { border-top: solid 1px #FFF; } #menu ul li a {display: block; text-decoration: none; color: #fff; background-color: #399; border: solid 1px #fff; border-top: none; padding: 8px; position: relative; } #menu ul li:hover {position: relative; background-color: #6CC; color: #000; } #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; position: relative; } #menu ul li ul {display: none; } #menu ul li a:hover ul, #menu ul li:hover ul {display: block; position: absolute;left: 161px;top:-1px!important;top: -31px; } #menu ul li ul li a {width: 150px; background-color: #6CC; color: #000; } #menu ul li ul li a:hover {position: relative; background-color: #399; color: #FFF; } table.falsa {border-collapse:collapse; border:0px; float: left; position: relative; }