problema con bloque en barra de navegacion

[b44]

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.?

[pzin]

Lo primero decirte que float: center; no existe.

Para controlar la posición del eje Z debes de usar z-index que además solo funcionará en elementos cuya posición no sea estática, lo que en tu caso debería de resultar en una posición relativa.

[b44]

Gracias pzin:
He realizado los cambios que me has aconsejado.

Código:

ul, ol {

	list-style:none;

}



.nav li a {

	background-color: white;

	color:black;

	text-decoration:none;

	display:block;

}

.nav > li {

	z-index:0;

	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:relative;
	z-index:0;

}


.nav li:hover > ul {

	display:block;

	background-color:transparent;

	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;

}

pero no se como puedo controlar su posicion y conseguir que los li internos abra entre los li externos.

[pzin]

Tienes varios errores ahí.

El problema es que la posición absoluta de los submenús toman como referencia body.

Aquí lo tienes todo un poco más arreglado: http://jsfiddle.net/rN59Q

[b44]

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;

}