Tema: Crear menu desplegables subyacentes en horizontal con CSS
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 23/09/2009, 06:29
JMCV
 
Fecha de Ingreso: agosto-2009
Mensajes: 35
Antigüedad: 15 años, 4 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.