ayuda con un menu horizontal desplegable codigo html
Código HTML:
<div id="fondo_barra"> <div id="alineacion_menu"> <div id="menu"> <ul> <li class="imagen_dere_menu"></li> <li class="boton1"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="estado_dos"> <li><a href="#">Conózcanos</a></li> <li><a href="#">Infraestructura</a></li> <li><a href="#">Metodología</a></li> <li><a href="#">Nuestros Clientes</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul> <li class="boton2"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="estado_dos"> <li><a href="#">Desarrollo Web</a></li> <li><a href="#">Mantenimiento</a></li> <li><a href="#">Hosting y Dominio</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul> <li class="boton3"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="estado_dos"> <li><a href="#">Portales Aliados</a></li> <li><a href="#">Redes Sociales</a></li> <li><a href="#">Google</a></li> <li><a href="#">Mobile Marketing</a></li> <li><a href="#">Email Marketing</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul> <li class="boton4"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="estado_dos"> <li><a href="#">Descargas</a></li> <li><a href="#">Bote Corriente</a></li> <li><a href="#">Novedades</a></li> <li><a href="#">Para clientes</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul> <li class="boton5"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="estado_dos"> <li><a href="#">Sugerencias</a></li> <li><a href="#">Reclamos</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="imagen_izq_menu"></li> </ul> </div> </div> </div>
Código HTML:
#fondo_barra {
background-image: url(images/fondo_menu.jpg);
background-repeat: repeat-x;
height: 40px;
width: 100%;
text-align:center;
}
#alineacion_menu {
margin: auto;
width: 873px;
height: 40px;
}
/*parametros generales del menu*/
#menu ul {
list-style-type:none;
padding:0;
margin:0;
height:40px;
display: inline;
}
#menu li{
float:left;
position:relative;
z-index:100;
margin:0px;
}
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:0px;
top:40px;
}
#menu a, #menu :visited {
display: block;
font-size: 13px;
font-family:"Trebuchet MS";
height: 20px;
padding: 10px 0px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}
#menu :hover{
color: #FFFFFF;
text-decoration: underline;
}
/*submenu*/
#menu ul ul {
visibility:hidden;
position:absolute;
width: 100%;
left: 0px;
height:0;
top:40px;
background: #2F3739;
}
#menu ul li ul li{
background: #2F3739;
width: 100%;
border-top:#CCCCCC solid 1px;
}
#menu ul li:hover ul,
#menu ul a:hover ul{
visibility:visible;
background: #2F3739;
}
/*estado over del submenu*/
.estado_dos a{
background: #2F3739;
}
.estado_dos a:hover{
background: #2F3739;
}
/*cada boton del submenu*/
.imagen_dere_menu {
background-image: url(images/imagen_barramenu1.jpg);
background-repeat: no-repeat;
width: 142px;
height: 40px;
}
.boton1 {
background-image: url(images/menu1.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 118px;
}
.boton1 :hover {
background-image: url(images/menu1b.jpg);
background-repeat: no-repeat;
}
.boton2 {
background-image: url(images/menu2.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 132px;
}
.boton2 :hover {
background-image: url(images/menu2b.jpg);
background-repeat: no-repeat;
}
.boton3 {
background-image: url(images/menu3.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 141px;
}
.boton3 :hover {
background-image: url(images/menu3b.jpg);
background-repeat: no-repeat;
}
.boton4 {
background-image: url(images/menu4.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 95px;
}
.boton4 :hover {
background-image: url(images/menu4b.jpg);
background-repeat: no-repeat;
}
.boton5 {
background-image: url(images/menu5.jpg);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 103px;
}
.boton5 :hover {
background-image: url(images/menu5b.jpg);
background-repeat: no-repeat;
}
.imagen_izq_menu {
background-image: url(images/imagen_barramenu2.jpg);
background-repeat: no-repeat;
width: 142px;
height:40px;
}
