Crear menu desplegables subyacentes en horizontal con CSS

[JMCV]

Hola buenas tardes a todos. A ver si alguienlogra solucionarme este problema.

Yo quiero tener un menu desplegable en css en el que los elementos de la primera lista desordenada estén en horizontal, los segundos en vertical, los terceros en horizontal, los cuartos en vertical... y así sucesivamente. Sin embargo, y aunque el resto de las propiedades me las coge perfectamente y el primer li me lo coloca en horizontal a partir del segundo me coloca todos en vertical.
¿Alguien puede ayudarme?

Os dejo el CSS

#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 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;
z-index:100;
}

#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 {
display:none;

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



#menudesp 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;
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_azultejano.png);
font-size:1.2em;
margin:0;
top:-20px;
left:75px;
color:#FFFFFF;
}
#menudesp li li li li a:link, #menudesp li li li li a:visited {
color:#FFFFFF;
}

Muchas Gracias

[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

[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?)

[kseso?]

Las particularidades de "display:block" podrás verlas en cualquier manual de css (www.librosweb.es por ejemplo).

Por lo que resaltas (los li flotados) es por lo que esos subniveles del menú se mostrarán en horizontal.
Para que lo hagan en la vertical (uno debajo del otro), haz como te decía inicialmente: no los flotes y usa el "display:block" para ese subvivel.

Un saludo

[JMCV]

Es que es eso precisamente lo que pretendía.


Me explico:

Lo que yo queria:

ul 1: en horizontal

ul 2: en vertical

ul3:en horizontal

ul4: en vertical

ul 5:en horizontal
.
.
.

Lo que yo tengo:

ul 1: en horizontal

ul 2: en vertical

ul3:en vertical

ul4: en vertical

ul 5:en vertical
.
.
.

Por favor ayudadme, no lo entiendo

[kseso?]

Creo que ando perdido con tus intenciones.
¿Qué son cada "ul-nº"?
¿Son las opciones de un mismo menú (los 'li' de un mismo 'ul'?
¿son listas distintas cada una? Son distintos ul y lo que quieres es que desplieguen sus elementos (li) alternativamente en vertical - horizontal -vertical - etc.

Básicamente es lo mismo. Pasa por lo que te comentaba ya en el nº #2: especificidad de cada selector, aplicando una clase a los li con "float:left" para los que vayan en horizontal y otra distinta con "display:block" para los que quieres apilados en vertical.

Pero pon el código html de esa (o esas) listas y añade un comentario a cada grupo indicando cómo se desplegarían.

Un saludo

[JMCV]

Dejo el esquema

#menudesp {

text-align:center;
font-family:Arial, Helvetica, sans-serif;

position:relative;
border:0px;

z-index:100;

}

#menudesp li li li, #menudesp li li li li, #menudesp li 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{

position:relative;
float:left;
width:75px;
height:24px;

}

#menudesp a, #menudesp a:visited {

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{

display:block;

}




#menudesp li li{

display:block;
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;

color:#6699FF;

}


#menudesp li li li li{

position:relative;
background-image:url(../recursos/pestana_menudesp_dorado.png);
font-size:1.2em;
font-weight:bold;
margin:0;
display:block;

color:#000088;

}

#menudesp li li li li li{

float:left;
position:relative;
background-image:url(../recursos/pestana_menudesp_verde.png);
font-size:0.8em;
margin:0;
color:#6699FF;

}

#menudesp li li li a:link, #menudesp li li li a:visited, #menudesp li li li li a:link, #menudesp li li li li a:visited, #menudesp li li li li li a:link, #menudesp li li li li li a:visited {

color:#FFFFFF;

}

y un HTML de ejemplo

<div id="menudesp">

<ul>

<li>Elementos en horizontal

<ul>

<li>Elementos en Vertical

<ul>

<li>Elementos en horizontal

<ul>

<li>Elementos en Vertical

<ul>

<li>Elementos en horizontal</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

[JMCV]

Alguien puede ayudarme?

[JMCV]

Nadie sabe cómo puedo solucionarlo. Gracias

[alexk]

no entiendo nada... si pudieras hacer una comparacion de como lo quieres seria bueno...

acostúmbrate a crear una estructura típica "árbol" para no liarse... que me pierdo en tu código jeje

mi inconciente me dice "display:block" pero mi conciente me dice "donde? y porque?" asi que no te logro entender del todo... esplicamelo con manzanitas jeje perdona pero no entiendo

[JMCV]

Perdona pero a la hora de postear me costaba mucho poner el esquema arbol.

Me gustaría darte una web de ejemplo pero no se de ninguna que lo haga.


Bueno, a ver si me explico sería si como en el menu ppal de forosdelweb en donde pone panel de control, ayuda ... desplegaramos comunidad (estado over no clic) y cuando nos pusieramos en grupos sociales (por ejemplo) en vez de llevarnos a una página nos desplegara otr menu en horizontal tipo el de panel de control, en ese menú si nos situáramos en enlaces (por ejemplo) se volviera desplegar otro menu en vertical como el que aparece y así sucesivamente.

No me dejan (por motivos de antiguedad) meter en el post una imagen de ejemplo asi que la he colgado aqui. fotoranking.es/out.php?i=64329_Sinttulo4.png


Mirala a ver si te sirve para comprenderme.


Muchas gracias

[JMCV]

Ups, acabo de descubrir que hay un botón de edicion avanzada para los posts.(por eso no lograba poner el post en el esquema arbol. Vuelvo a postearlo a ver si alguien puede ayudarme. Por favor. Muchas gracias

#menudesp {

text-align:center;
font-family:Arial, Helvetica, sans-serif;

position:relative;
border:0px;

z-index:100;

}

#menudesp li li li, #menudesp li li li li, #menudesp li 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{

position:relative;
float:left;
width:75px;
height:24px;

}

#menudesp a, #menudesp a:visited {

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{

display:block;

}




#menudesp li li{

display:block;
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;

color:#6699FF;

}


#menudesp li li li li{

position:relative;
background-image:url(../recursos/pestana_menudesp_dorado.png);
font-size:1.2em;
font-weight:bold;
margin:0;
display:block;

color:#000088;

}

#menudesp li li li li li{

float:left;
position:relative;
background-image:url(../recursos/pestana_menudesp_verde.png);
font-size:0.8em;
margin:0;
color:#6699FF;

}

#menudesp li li li a:link, #menudesp li li li a:visited, #menudesp li li li li a:link, #menudesp li li li li a:visited, #menudesp li li li li li a:link, #menudesp li li li li li a:visited {

color:#FFFFFF;

}

y un HTML de ejemplo

<div id="menudesp">

<ul>

<li>Elementos en horizontal

<ul>

<li>Elementos en Vertical

<ul>

<li>Elementos en horizontal

<ul>

<li>Elementos en Vertical

<ul>

<li>Elementos en horizontal</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

La imagen de ejemplo sigue estando en fotoranking.es/out.php?i=64329_Sinttulo4.png.