Hola!!
He adaptado un menu de los ejemplos que Mikmoro ha facilitado. Pero algo debo haber borrado que no tenia que borrar, ya que cuando trato de clicar sobre el menu nivel 2, éste desaparece. No se si me explico. Uf! ¿Alguien sabe cual es el error? Muchas gracias.
El codigo HTML y CSS es:
HTML
<head>
<title>Menus desplegable solo CSS ejemplo 12</title>
<link rel="stylesheet" href="css/menu-12.css" type="text/css" />
<!--[if IE]><style>#menu ul li ul li a{margin-bottom:-1px;border-top-color: #fff;} #menu ul.nivel2{margin-top: -1px;}</style><![endif]-->
<!--[if IE 7]><style>#menu ul li ul li.nivel2:hover{margin-bottom:-2px;}</style><![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1">INICIO</li>
<li class="nivel1"><a href="#" class="nivel1">¿QUIÉNES SOMOS?</a></li>
<li class="nivel1"><a href="#" class="nivel1">¿QUÉ HACEMOS?</a></li>
<li class="nivel1"><a href="#" class="nivel1">PROYECTOS</a>
<ul class="nivel2">
<li><a href="#">VIVIENDAS</a></li>
<li><a href="#">LOCALES</a></li>
<li><a href="#">OFICINAS</a></li>
</ul></li>
<li class="nivel1"><a href="#" class="nivel1">CONTACTO</a>
</li>
</ul>
</div>
</body>
</html>
[COLOR="rgb(255, 140, 0)"]y el CSS:[/COLOR]
body {
background-color: #000000;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
margin-top: 100px;
text-align: center;
}
#menu {
float: left;
font-size: 11px;
margin-top: 20px;
text-align: left;
}
#menu ul {
list-style-type: none;
}
#menu ul li a {
background-color: #000000;
border: solid 0px #FFFFFF;
color: #FFD700;
display: block;
padding: 0px;
position: relative;
text-decoration: none;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {
display: block!important;
display: none;
position: relative;
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {
color: #000000;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #000000;
color: #F0E68C;
position: relative;
}
#menu ul li ul {
display: none;
}
#menu ul li ul li a {
}
#menu ul li ul li a:hover {
border-top-color: #000000;
position: relative;
}
#menu ul li.nivel1 {
float: left;
margin-right: 1px;
margin-right: 20px;
}
#menu ul li:hover {
position: relative;
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{
display: block;
left: -40px;
line-height: 20px;
padding-top: 8px;
position: absolute;
}