Hola a todos:
Tengo la siguiente lista para crear una barra de navegacion.
codigo html
Código:
<ul class="nav">
<li> <a href="index.html" title="inicio ">Estamos en</a>
<ul>
<li> <a href="">somos</a> </li>
<li> <a href="" >Ubicación</a> </li>
<li> <a href="" ">Contacto</a> </li>
</ul>
</li>
<li id="nav"><a href="index.html" title="inicio ">Servicios</a>
<ul>
<li> <a href="">Documentos</a> </li>
<li> <a href="">Datos</a> </li>
<li> <a href="">Casas</a> </li>
<li> <a href="">Elementos</a> </li>
</ul>
</li>
<li><a href="index.html" title="inicio ">Enlaces</a>
<ul>
<li> <a href="" >Teléfonos</a></li>
<li> <a href="" >Direcciones</a></li>
<li> <a href="" >Diccionario</a></li>
<li> <a href="" >Misceláneo</a></li>
<li> <a href="" >enlaces</a></li>
<li> <a href="" >Prensa</a></li>
<li> <a href="" >Enlaces a otros Sitios</a></li>
</ul>
</li>
<li><a href="index.html" title="inicio ">Privado</a>
<ul>
<li> <a href="" target="_blank" >correo</a> </li>
<li> <a href="s" target="_blank" >enlace</a> </li>
</ul>
</li>
<li><a href="index.html" title="inicio ">Mapa del Sitio</a>
<ul>
<li> <a href="" >Mapa Web</a> </li>
</ul>
</li>
</ul>
codigo css
Código:
ul, ol {
list-style:none;
}
.nav li a {
background-color: white;
color:black;
text-decoration:none;
display:block;
}
.nav > li {
float:center;
font-family: Arial,Verdana,serif,cursive,monospace,sans-serif,fantasy;
font-size: 16px;
text-align:left;
padding:1px 1px 1px 1px;
background-color:white;
color:black;
height: 26px;
width: 180px;
border:1px solid black;
}
.nav > li a:hover {
background-color: #edf1e0;
color:black;
height: 30px;
width: 180px;
}
.nav li ul {
display: none;
position:absolute;
left:0px;
}
.nav li:hover > ul {
display:block;
background-color:#edf1e0;
color:black;
}
.nav li ul li {
position:relative;
background-color:white;
color:black;
padding:1px 1px 1px 1px;
font-family: Arial,Verdana,serif,cursive,monospace,sans-serif,fantasy;
font-size: 14px;
text-align:left;
width: 180px;
height: 30px;
border:1px solid black;
}
El funcionamiento es el siguiente:
Tengo un ul con cinco li que son:
estamos en, servicios, enlaces, privado, mapa del sitio
estos ele tienen un ul con un bloque li que abre debajo del li al que corresponde, en el primer caso seria este
Código:
<ul>
<li> <a href="index.html" title="inicio ">Estamos en</a>
<ul>
<li> <a href="">somos</a> </li>
<li> <a href="" >Ubicación</a> </li>
<li> <a href="" ">Contacto</a> </li>
</ul>
</li>
Entonces al pasar el raton por "Estamos en" me abre justo debajo los li
"somos, Ubicacion, Contacto " el problema es que lo hace tapando el resto de barra de navegacion es decir
sobre los li servicios, enlaces, privado, mapa del sitio
Mi pregunta es ¿como puedo maquetar con css para que abra los li internos entre los li superiores.?