Está en la página 1de 3

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.

org/TR/x
html1/DTD/xhtml1-strict.dtd">
Menus desplegable solo CSS ejemplo 8 - Recursos CSS - araudi.net

<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de


contenidos" media="all" lang="es" />
<style type="text/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: 420px;
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: #fff;
color: #6CC;
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;
}
</style>
<!--[if IE 6]><style>#menu ul li.nivel1 {margin-bottom:-1px}</style><![endif]-->
<!--[if IE 7]><style>#menu {left: -88px;} #menu ul li.nivel1 {margin-bottom:-2px
}</style><![endif]-->
<div id="principal">Men principal
<div id="menu">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Opcin 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opcin 1<table class="falsa"><tr><t
d><![endif]-->
<ul>
<li class="primera"><a href="http://www.google.es">Opcin 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">Opcin 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opcin 2<table class="falsa"><tr><t
d><![endif]-->

<ul>
<li class="primera"><a href="#">Opcin 2.1</a></li>
<li><a href="#">Opcin 2.2</a></li>
<li><a href="#">Opcin 2.3</a></li>
<li><a href="#">Opcin 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">Opcin 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opcin 3<table class="falsa"><tr><t
d><![endif]-->
<ul>
<li class="primera"><a href="#">Opcin 3.1</a></li>
<li><a href="#">Opcin 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">Opcin 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opcin 4<table class="falsa"><tr><t
d><![endif]-->
<ul>
<li class="primera"><a href="#">Opcin 4.1</a></li>
<li><a href="#">Opcin 4.2</a></li>
<li><a href="#">Opcin 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">Opcin 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opcin 5<table class="falsa"><tr><t
d><![endif]-->
<ul>
<li class="primera"><a href="#">Opcin 5.1</a></li>
<li><a href="#">Opcin 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>
</!doctype>