Foros del Web » Creando para Internet » CSS »

Crear menu desplegables subyacentes en horizontal con CSS

Estas en el tema de Crear menu desplegables subyacentes en horizontal con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/08/2009, 04:19
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 8 años, 3 meses
Puntos: 0
Crear menu desplegables subyacentes en horizontal con CSS

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


Cita:
#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

Última edición por JMCV; 30/08/2009 a las 04:26
  #2 (permalink)  
Antiguo 30/08/2009, 07:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 30/08/2009, 07:30
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

Cita:
Iniciado por kseso? Ver Mensaje
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í.

Cita:
#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?)
  #4 (permalink)  
Antiguo 30/08/2009, 10:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 01/09/2009, 09:12
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

Es que es eso precisamente lo que pretendía.


Me explico:

Lo que yo queria:

Cita:
ul 1: en horizontal

ul 2: en vertical

ul3:en horizontal

ul4: en vertical

ul 5:en horizontal
.
.
.


Lo que yo tengo:

Cita:
ul 1: en horizontal

ul 2: en vertical

ul3:en vertical

ul4: en vertical

ul 5:en vertical
.
.
.
Por favor ayudadme, no lo entiendo
  #6 (permalink)  
Antiguo 01/09/2009, 10:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 03/09/2009, 03:34
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

Dejo el esquema


Cita:
#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

Cita:
<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>

Última edición por JMCV; 23/09/2009 a las 07:29
  #8 (permalink)  
Antiguo 06/09/2009, 15:55
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

Alguien puede ayudarme?
  #9 (permalink)  
Antiguo 18/09/2009, 14:20
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

Nadie sabe cómo puedo solucionarlo. Gracias
  #10 (permalink)  
Antiguo 18/09/2009, 17:10
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

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

Última edición por alexk; 18/09/2009 a las 17:12 Razón: falto
  #11 (permalink)  
Antiguo 21/09/2009, 04:33
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

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

Última edición por JMCV; 21/09/2009 a las 04:48
  #12 (permalink)  
Antiguo 23/09/2009, 07:29
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Crear menu desplegables subyacentes en horizontal con CSS

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


Cita:
#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

Cita:
<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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:59.