Tema: Crear menu desplegables subyacentes en horizontal con CSS
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 03/09/2009, 02:34
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
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 06:29