Hola he realizado algunos cambios principalmene para poner la barra de navegacion en linea
display:inline; en vez de en bloque.
El problema me ha surgido cuando he intentado introducir una tercera lista dentro de otra lista.
Dentro de datos quiero abrir otra lista datos primera hoja, .... este es un
li dentro de un
ul dentro de un
li de un
ul de un
li de un
ul que tiene la
class="nav"
¿Que tengo que modificar para que aparezca el nuevo listado?
¿porque no reconoce .nav li ul li ul li{?
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>
<ul>
<li> <a href="">Datos primera hoja</a> </li>
<li> <a href="">Datos primera hoja</a> </li>
<li> <a href="">Datos primera hoja</a> </li>
</ul>
<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>
</ul>
CODIGO CSS
Código:
ul, ol {
list-style:none;
}
.nav li {
background-color: #edf1e0;
color: #696969;
text-decoration:none;
display:inline;
position: relative;
}
.nav > li a {
position: relative;
font-family: Arial, Verdana, serif, cursive, monospace, sans-serif, fantasy;
font-size: 16px;
text-align: left;
background-color: white;
color: #696969;
height: 25px;
width: 140px;
padding: 8px;
border:1px solid #696969;
}
.nav > li a:hover {
background-color: #edf1e0;
color:#0f6e29;
height: 25px;
width: 120px;
}
.nav li:hover > ul {
display:block;
background-color:transparent;
}
.nav li ul {
display: none;
position:absolute;
left: -40px;
top: 23px;
z-index: 2;
}
.nav li ul li a {
display:block;
position:relative;
background-color:white;
color:#696969;
font-family: Arial,Verdana,serif,cursive,monospace,sans-serif,fantasy;
font-size: 14px;
text-align:center;
width: 120px;
height: 25px;
padding: 6px;
border:1px solid #696969;
}
.nav li ul li ul li{
display:block;
position:relative;
background-color:white;
color:#696969;
font-family: Arial,Verdana,serif,cursive,monospace,sans-serif,fantasy;
font-size: 14px;
text-align:center;
width: 120px;
height: 25px;
padding: 6px;
border:1px solid #696969;
}