[:D] saludos a todos... me lei casi toda la web pero se me escapan ciertos detalles por lo ke pido su ayuda amigos... adapte un menu horizontal para mi pagina web lo tenia terminado asi como esta imagen pero no estaba centrado... cambie algunos codigos del css y consegui centrarlo, pero se me deformo todos los submenus :| ver la imagen
Lo estuve revisando pero no doy con la manera como corregirlo, denme una mano, aqui les mando los codigos
codigo css:
-----------------------
.menu{ margin:1 auto;
padding:0;
text-align: center; }
.menu li, .menu li a{
display:inline; /*aplica el haslayout para IE6 asi evitamos el doble margen a elementos flotados*/
width:auto; }
.menu li{
margin:0 ; /*el 1px separaba las cajas*/
position:relative; /*Importante para el submenu pero por ahora no*/ }
.menu li a{
text-decoration: none;
background: #d20a1e;
color:white;
font: 16px "Trebuchet MS", Arial;
padding:3px 30px; /*espaciado de margen del texto dentro de la caja*/
border: 1px solid #ACCFE8; } /*borde y color de botones*/
.menu li a:hover{
background: #F31D36; }
/*MENU DESPLEGABLE*/
.menu li:hover ul{
display:block; } /*Indicamos que en hover del menu muestre el submenu*/
.menu ul{
display:none; /*indicamos que al cargar la web no muestre el submenu*/
left:0;
padding: 0; /*bordes externos del submenu*/
position:absolute;
top:27px; /*margen superior de submenu, evita que submenu tape a menu*/
width:130px; } /*Le cambiamos el ancho sino hereda del ul anterior*/
.menu ul li {
margin:0;
padding:3px;
width:1050px; }
.menu ul li a{
border-width: 0 1px 1px 1px ;
border-color:#ACCFE8 ;
border-style:solid ;
color:white; /*color de texto de submenu*/
margin:2px ;
padding:3px 5px 3px 5px; /*Margen superior-inferior e izquierdo-derecho dentro de cajita submenu*/
width:850px; }
.menu ul li a:hover{
background: #F31D36; }
---------------------
codigo html:
---------------------
<html lang="es">
<head>
<title>menu hovizontal 3</title>
<link href="./estiloh.css" rel="stylesheet" type="text/css">
</head>
.....
<div style="text-align:center;" >
....
<br>
<ul class="menu">
<li><a href="http://www.rafersa.com.pe">Inicio</a></li>
<li><a href="http://www.rafersa.com.pe">Productos</a></li>
<li><a href="http://www.hi5.com">Servicios</a>
<ul>
<li><a href="http://www.google.com.pe">SubMenu uno</a></li>
<li><a href="http://www.hi5.com">SubMenu dos</a></li>
<li><a href="http://www.rafersa.com.pe">SubMenu tres</a></li>
<li><a href="http://www.rafersa.com.pe">SubMenu cuatro</a></li>
</ul>
</li>
<li><a href="#">Sucursales</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Noticias</a></li>
</ul>
</div>
...
Lo estuve revisando pero no doy con la manera como corregirlo, denme una mano, aqui les mando los codigos
codigo css:
-----------------------
.menu{ margin:1 auto;
padding:0;
text-align: center; }
.menu li, .menu li a{
display:inline; /*aplica el haslayout para IE6 asi evitamos el doble margen a elementos flotados*/
width:auto; }
.menu li{
margin:0 ; /*el 1px separaba las cajas*/
position:relative; /*Importante para el submenu pero por ahora no*/ }
.menu li a{
text-decoration: none;
background: #d20a1e;
color:white;
font: 16px "Trebuchet MS", Arial;
padding:3px 30px; /*espaciado de margen del texto dentro de la caja*/
border: 1px solid #ACCFE8; } /*borde y color de botones*/
.menu li a:hover{
background: #F31D36; }
/*MENU DESPLEGABLE*/
.menu li:hover ul{
display:block; } /*Indicamos que en hover del menu muestre el submenu*/
.menu ul{
display:none; /*indicamos que al cargar la web no muestre el submenu*/
left:0;
padding: 0; /*bordes externos del submenu*/
position:absolute;
top:27px; /*margen superior de submenu, evita que submenu tape a menu*/
width:130px; } /*Le cambiamos el ancho sino hereda del ul anterior*/
.menu ul li {
margin:0;
padding:3px;
width:1050px; }
.menu ul li a{
border-width: 0 1px 1px 1px ;
border-color:#ACCFE8 ;
border-style:solid ;
color:white; /*color de texto de submenu*/
margin:2px ;
padding:3px 5px 3px 5px; /*Margen superior-inferior e izquierdo-derecho dentro de cajita submenu*/
width:850px; }
.menu ul li a:hover{
background: #F31D36; }
---------------------
codigo html:
---------------------
<html lang="es">
<head>
<title>menu hovizontal 3</title>
<link href="./estiloh.css" rel="stylesheet" type="text/css">
</head>
.....
<div style="text-align:center;" >
....
<br>
<ul class="menu">
<li><a href="http://www.rafersa.com.pe">Inicio</a></li>
<li><a href="http://www.rafersa.com.pe">Productos</a></li>
<li><a href="http://www.hi5.com">Servicios</a>
<ul>
<li><a href="http://www.google.com.pe">SubMenu uno</a></li>
<li><a href="http://www.hi5.com">SubMenu dos</a></li>
<li><a href="http://www.rafersa.com.pe">SubMenu tres</a></li>
<li><a href="http://www.rafersa.com.pe">SubMenu cuatro</a></li>
</ul>
</li>
<li><a href="#">Sucursales</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Noticias</a></li>
</ul>
</div>
...