Hola amigos he bajado un codigo Css desde Internet, lo he editado el unico problema es en lo relacionado con la ubicacion del submenu.
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.