Ver Mensaje Individual
  #2 (permalink)  
Antiguo 01/04/2009, 11:42
diegocespedes
 
Fecha de Ingreso: noviembre-2008
Ubicación: W2.0
Mensajes: 103
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: ayuda con un menu horizontal desplegable

Cita:
<div id="marco">
<span class="preload2"></span>

<ul class="menu2">

<li class="top" ><a href="#" id="Hotel" class="top_link"><span class="down" >BOTON</span></a>

<ul class="sub">
<li><a href="#" class="fly">SUBOTON</a>

<ul>
<li><a href="#">PRODUCTO</a></li>
</ul>
</li>
</ul>


</div>


Luego este sería el css


Cita:
#marco {
width:890px;
padding:0px;
text-align:left;
margin: 0px auto 0px auto !important;
color: #000000!important;
}


.preload2
{
background-color: transparent!important;

}
.menu2
{
color: #000000!important;
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
list-style:none;
height:25px;
background-color: #Ffffff!important;
position:relative;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
font-size: 12px !important;
font-weight: bold;

}
.menu2 li.top
{
display:block;
float:left;
position:relative;
color: #3333333!important;
font-size: 12px !important;
font-weight: bold;
height:25px !important;
border-left: 1px solid transparent;
border-right: 1px solid #CCC;
margin: 0px 0px 0px 0px !important;
width:176px;
}
.menu2 li a.top_link
{
display:block;
text-align:center!important;
float:left;
height:25px;
margin-left:6px;
line-height:25px;
color:#000000!important;
text-decoration:none;
padding:0 0 0 6px !important;
cursor:pointer;
background-color: #ffffff;
font-size: 12px !important;
font-weight: bold;
height: 25px !important;
margin: 0px 0px 0px 0px !important;
}
.menu2 li a.top_link span
{
float:left;
text-align:center!important;
display:block;
padding:0 10px 0 6px;
height:40px;
color:#000000!important;
width:164px;
}
.menu2 li a.top_link span.down
{
float:left;
text-align:center!important;
display:block;
padding:0 10px 0 16px;
height:25px;
color:#000000!important;

}
.menu2 li a.top_link:hover
{
color:#000000!important;
text-align:center!important;
width:164px;
border-left: 2px solid #BA3E00;
border-right: 2px solid #BA3E00;
}
.menu2 li a.top_link:hover span
{
background-color: #ffffff!important;
}
.menu2 li a.top_link:hover span.down
{
background-color:#ffffff!important;
}

.menu2 li:hover > a.top_link
{
color:#000000!important;
}
.menu2 li:hover > a.top_link span
{
background-color: #ffffff!important;
}
.menu2 li:hover > a.top_link span.down
{
background-color: #ffffff!important;
}
.menu2 table
{
border-collapse:collapse;
width:0;
height:0;
position:absolute;
top:0;
left:10;
}
.menu2 a:hover
{
visibility:visible!important;
}
.menu2 li:hover
{
position:relative!important;
z-index:200!important;
}
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul
{
position:absolute!important;
left:-9999px; top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;

}

.menu2 :hover ul.sub
{
left:1px!important;
top:25px;
background-color: #ffffff!important;
padding:0;
width:auto;
height:auto;
font-weight:normal;
background-color:transparent!important;
}
.menu2 :hover ul.sub li
{
display:block;
position:relative;
background-color:#ffffff!important;
float:left;
width:160px;
border-bottom:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
margin-bottom:0;
}
.menu2 :hover ul.sub li a
{
display:block;
height:auto;
font-size:12px;
font-weight:bold;
padding:4px 3px 4px 10px!important;
color:#000000!important;
text-decoration:none;
}
.menu2 :hover ul.sub li a.fly
{
background:#ffffff url(../images/vineta_menu.gif) no-repeat 150px 6px!important;
}
.menu2 :hover ul.sub li a:hover
{
background:#933000!important;
color:#ffffff!important;
}
.menu2 :hover ul.sub li a.fly:hover
{
background:#933000 url(../images/vineta_menu2.gif) no-repeat 150px 6px!important;
}
.menu2 :hover ul li:hover > a.fly
{
background:#ffffff!important;
}
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{
left:160px;
top:1px;
background-color: #ffffff!important;
padding:0;
width:auto;
z-index:100;
height:auto;

}
.menu2 :hover ul.sub li ul
{
border-top:1px solid #cccccc!important;
background-color: #ffffff!important;
z-index:100;
}
espero que te sirva... compáralo y listo.
Si deseas meter mas botones o subbotones manu¡ipulas los <li> y <ul>