Crear menu desplegables subyacentes en horizontal con CSS

[JMCV]

Iniciado por kseso?

Tendrás que definir todos los li de cada subnivel
ul li ul li para el primer subnivel (display: block)
ul li ul li ul li para el segundo subnivel (float: left)
y así sucesivamente para todos y cada uno de los desplegables. Añadiendo, claro está, las propiedades y sus valores restantes.

Un saludo

Ay, perdona. No me había dado cuenta y como he cambiado tantas veces el CSS he copiado una version antigua. En realidad y actuamente lo tengo así.

#menudesp {
/*font-size:10pt; */
text-align:center;
font-family:Arial, Helvetica, sans-serif;
/*font-weight:bold;*/
position:relative;
border:0px;
/*cursor:pointer;*/
z-index:100;
}

#menudesp li li li, #menudesp li li li li{
top:-20px;
left:75px;
}


#menudesp ul, #menudesp ul ul, #menudesp ul ul ul, #menudesp ul ul ul ul{
padding:0;
margin:0;
list-style-type:none;
}

#menudesp li{
display:block;
position:relative;
float:left;
width:75px;
height:24px;
}

#menudesp a, #menudesp a:visited {
/*cursor:auto;*/
display:block;
text-decoration:none;
color:#000000;
}

#menudesp a:hover {
background-image:url(../recursos/pestana_menudesp_morado.png);
color:#FFFFFF; }
#menudesp ul li{
font-size:8.5pt;

cursor:default;
background-image:url(../recursos/pestana_menudesp.png);
text-align:center;
margin-bottom:0;
line-height:22px;
}


#menudesp ul ul, #menudesp ul ul ul, #menudesp ul ul ul ul, #menudesp ul ul ul ul ul{
display:none;

list-style:none;
height:0;
left:0;
}



#menudesp ul li:hover >ul,menudesp ul li ul li:hover >ul, menudesp ul li ul li ul li:hover >ul, menudesp ul li ul li ul li ul li:hover >ul{
display:block;
}




#menudesp li li{
background-image:url(../recursos/pestana_menudesp_blanco.png);
font-size:0.7em;
font-weight:bolder;
margin:0;}

#menudesp li li li{
position:relative;
float:left;
background-image:url(../recursos/pestana_menudesp_negro.png);
font-size:1.2em;
font-weight:100;
margin:0;
/*top:-20px;
left:75px;*/
color:#6699FF;
}
#menudesp li li li a:link, #menudesp li li li a:visited {
color:#FFFFFF;
}

#menudesp li li li li{
position:relative;
background-image:url(../recursos/pestana_menudesp_dorado.png);
font-size:1.2em;
font-weight:bold;
margin:0;
/*top:-20px;
left:75px;*/
color:#000088;

}
#menudesp li li li li a:link, #menudesp li li li li a:visited {
color:#000000;
}
#menudesp li li li li li{
float:left;
position:relative;
background-image:url(../recursos/pestana_menudesp_verde.png);
font-size:0.8em;
margin:0;
line-height:12px;
left:70px;
width:37px;
height:12px;
/*top:-20px;
left:75px;*/
color:#6699FF;
}
#menudesp li li li li li a:link, #menudesp li li li li a:visited {
color:#FFFFFF;
}

Como ves, los float:left están definidos (te los he remarcado en rojo) pero no me funciona. Siguen en vertical todos menos el primero.

Por cierto, que tiene que ver el display:block(eso ta solo es para que me muetsre la bacjground image entera y no solo debajo del texto, ¿no?)