Adjunto la primer imagen que es como se ve actualmente, y la segunda imagen es como quisiera que se vea.
IMAGEN 1 (Actualmente)
IMAGEN 2
CODIGO CSS
Código HTML:
#main
{
width:1040px;
float:none;
margin:0 auto;
padding:0px;
background-color:White;
}
ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative;
top: 0px;
left: 0px;
height: 24px;
width: 1040px;
}
ul#navmenu-h ul {
width: 160px; /* Sub Menu Width */
margin: 0px;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}
ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; }
ul#navmenu-h li { float: left; display:inline; position:relative;
top: 0px;
left: 0px;
width: 148px;
text-align: left;
}
ul#navmenu-h ul li { width: 100%; display: block;
text-align: left;
}
/* Root Menu */
ul#navmenu-h a {
border-top: 1px solid #FFF;
border-right: 1px solid #FFF;
padding: 6px;
float: left;
display: block;
background: #FFF;
color: #666;
font: bold 11px Arial, sans-serif;
text-decoration: none;
height: 20px;
width: 137px;
text-align: left;
}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a {
background: #FFF;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a {
float: none;
background: #BBB;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a {
background: #999;
}
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a {
background: #999;
}
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a {
background: #666;
}
/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}
/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}
/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; }
ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }
CODIGO HTML
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Wellnet</title> <link href="Styles/Style.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> $(document).ready(function() { $('.links li code').hide(); $('.links li p').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body background="Imagenes/Masterpage/back.jpg" style="background-repeat:repeat-x; margin: 0px; padding: 0px; text-align:center"> <div id= "main"> <img src="Imagenes/MasterPage/Main.jpg" style="width: 1040px; height: 428px" /><br /> <div> <div> <div id="page"> <div id="body"> <div id="content"> <ul id="navmenu-h"> <li><a href="#" style="background-image: url('Imagenes/Botones/Inicio.png')"></a> <ul> <li><a href="#">Quienes Somos</a></li> <li><a href="#">Que Hacemos</a></li> <li><a href="#">Donde Estamos</a></li> <li><a href="#">Staff</a></li> <li><a href="#">SubDistribución</a></li> <li><a href="#">Comercio Exterior</a></li> </ul> </li> <li><a href="#" style="background-image: url('Imagenes/Botones/Productos.png')"></a> <ul> <li><a href="#">Plataformas Vibratorias</a></li> <li><a href="#">Accesorios</a></li> </ul> </li> <li><a href="#" style="background-image: url('Imagenes/Botones/InfoCientifica.png')"></a> <ul> <li><a href="#">Que es</a></li> <li><a href="#">Como Funciona</a></li> <li><a href="#">Para Que Sirve</a></li> <li><a href="#">Entrenamiento</a></li> <li><a href="#">Bases Fisiológicas</a></li> </ul> </li> <li><a href="#" style="background-image: url('Imagenes/Botones/Servicios.png')"></a> <ul> <li><a href="#">Opción Comodatos</a></li> <li><a href="#">Proyec. Financiera</a></li> <li><a href="#">Apoyo Publicitario</a></li> <li><a href="#">Servicio Técnico</a></li> <li><a href="#">Capacitación</a></li> </ul> </li> <li><a href="#" style="background-image: url('Imagenes/Botones/CentrosWN.png')"></a> <ul> <li><a href="#">Argentina</a></li> <li><a href="#">Sport Club</a></li> <li><a href="#">Latinoamerica</a></li> </ul> </li> <li><a href="#" style="background-image: url('Imagenes/Botones/Novedades.png')"></a> <ul> <li><a href="#">Presencia en la Costa</a></li> <li><a href="#">Presencia en las Sierras</a></li> <li><a href="#">Presencia en los C. Sky</a></li> <li><a href="#">Nuevas Aperturas</a></li> <li><a href="#">Sport Club</a></li> </ul> </li> <li><a href="#" style="background-image: url('Imagenes/Botones/Contactenos.png')"></a></li> </ul> </div> </div> </div> </div> <br /> <img src="Imagenes/MasterPage/Pie03.jpg" style="width: 1026px; height: 238px" alt="" /><br /> </div> </div> </body> </html>
Espero que alguien me pueda dar una Mano con esto.
Desde ya Muchas gracias.
Nicolas.
