Foros del Web » Creando para Internet » CSS »

Error menu desplegable

 Estas en el tema de Error menu desplegable en el foro de CSS en Foros del Web. Tengo un menu desplegable que todo me funciona bien excepto cuando se despliega que aparece el menu inferior desplazado por los lados. Adjunto foto. Me ...
  #1 (permalink)  
Antiguo 22/08/2012, 04:19
 
Fecha de Ingreso: octubre-2009
Mensajes: 299
Antigüedad: 15 años, 1 mes
Puntos: 2
Error menu desplegable
Tengo un menu desplegable que todo me funciona bien excepto cuando se despliega que aparece el menu inferior desplazado por los lados. Adjunto foto.

Me gustaria saber que parametro usar para centrarlo. Adjunto CSS




#menu {
width: 900px;
text-align: center;
font-size: 12px;
position: absolute;
left: 0px;
top: 210px;
height: 30px;
background: url(../imagenes/pmt.gif) repeat-x;
z-index: 10;
text-align: center;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCC;
border-bottom-color: #CECFCE;
}
#menu ul {
list-style-type: none;
margin-top: 0px;
margin-left:25px


}
#menu ul li {
width: 190px;
}
#menu ul li.nivel1 {
margin-right: 1px; float: left;
}
#menu ul li a {
padding: 8px;
color: #666;
text-decoration: none;
display: block;
position: relative;
display: block;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
letter-spacing : 2px;

text-align: center;
}
#menu ul li a.nivel2 {
color: rgb(0, 0, 0);
margin-left:0px;
}
#menu ul li a.nivel2ie {
color: rgb(0, 0, 0);
margin-left:0px;
}
#menu ul li a.nivel1 {
display: block !important; position: relative;
}
#menu ul li a.nivel2 {
display: block !important; position: relative;
}
#menu ul li:hover {
position: relative;
}
#menu ul li a:hover {
color: #999;
position: relative;
background: url(../imagenes/pmta.gif) repeat-x;
}
#menu ul li:hover a.nivel1 {
color: #666;
position: relative;
background: url(../imagenes/pmta.gif) repeat-x;
}
#menu ul li ul {
display: none;
background: url(../imagenes/pmt.gif) repeat-x;
background-color:#FFF
}
#menu ul li:hover ul.nivel2 {
left: 0px; display: block; position: absolute;
}
#menu ul li a:hover ul.nivel2 {
left: 0px; display: block; position: absolute;
}
#menu ul li ul li a:hover ul.nivel3 {
left: 180px !important;
top: 0px !important;
display: block;
position: absolute;
text-color: #F0F;
}
#menu ul li ul li:hover ul.nivel3 {
left: 180px !important; top: 0px !important; display: block; position: absolute;
}
#menu ul li ul li a {
padding: 8px 0px; width: 180px; border-top-color: transparent;
}
#menu ul li ul li a:hover {
border-top-color: #CCC;
position: relative;
}
#menu ul li ul li ul li a.primera {
border-top-color: #CCC;
}
table.falsa {
border: 0px currentColor; float: left; border-collapse: collapse; position: relative;
}
  #2 (permalink)  
Antiguo 24/08/2012, 00:39
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 10 meses
Puntos: 306
Respuesta: Error menu desplegable
¿Y cual es el html donde se aplican esos estilos?
Publica también el html del menú y sus contenedores, o pon un enlace.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 24/08/2012, 01:57
 
Fecha de Ingreso: octubre-2009
Mensajes: 299
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: Error menu desplegable
Gracias por la respuesta! Aqui va el codigo

<div id="menu">
<ul>
<li class="nivel1"><a class="nivel1">Empresa</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="empresa.html">Historia</a></li>
<li><a href="tecnico">Departamento técnico</a></li>
<li><a href="donde">Donde estamos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="aluminio.html" class="nivel1">Sistemas de aluminio</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="rotura.html">Rotura de puente térmico</a></li>
<li><a href="srotura.html">Sin rotura de puente térmico</a></li>
<li><a href="mallorquina.html">Mallorquina</a></li>
<li><a href="barandillas.html">Barandillas</a></li>
<li><a href="mosquiteras.html">Mosquiteras</a></li>
<li><a href="alotros.html">Otros sistemas</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a class="nivel1">Fachadas</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li class="nivel2"><a class="nivel2" href="muroscortina.html">Muros Cortina</a>
<!--[if lte IE 6]><a href="#" class="nivel2ie">Opción 2.3 »<table class="falsa"><tr><td><![endif]-->
<ul class="nivel3">
<li><a class="primera" href="estructural.html">Estructural</a></li>
<li><a href="intercalario.html">Intercalario</a></li>
<li><a href="tapeta.html">Tapeta</a></li>
<li><a href="otros.html">Otros</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="aluminiocomp.html">Composite de aluminio</a></li>
<li><a href="maderacomp.html">Composite de madera</a></li>
<li><a href="metalicos.html">Metálicas</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Carpintería metálica</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Acero inoxidable</a></li>
<li><a href="#">Forja</a></li>
<li><a href="#">Hierro</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
  #4 (permalink)  
Antiguo 28/08/2012, 04:01
 
Fecha de Ingreso: octubre-2009
Mensajes: 299
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: Error menu desplegable
¿Alguien me puede echar una mano con esto?
  #5 (permalink)  
Antiguo 30/08/2012, 20:38
 
Fecha de Ingreso: agosto-2012
Mensajes: 17
Antigüedad: 12 años, 4 meses
Puntos: 1
Respuesta: Error menu desplegable
prueba con este css a ver

Código CSS: 
Ver original
  1. #menu {
  2. width: 900px;
  3. text-align: center;
  4. font-size: 12px;
  5. position: absolute;
  6. left: 0px;
  7. top: 210px;
  8. height: 30px;
  9. background: url(../imagenes/pmt.gif) repeat-x;
  10. z-index: 10;
  11. text-align: center;
  12. border-top-width: 1px;
  13. border-bottom-width: 1px;
  14. border-top-style: solid;
  15. border-bottom-style: solid;
  16. border-top-color: #CCC;
  17. border-bottom-color: #CECFCE;
  18. }
  19. #menu ul {
  20. list-style-type: none;
  21. margin-top: 0px;
  22. margin-left:25px
  23.  
  24.  
  25. }
  26. #menu ul li {
  27. width: 190px;
  28. }
  29. #menu ul li.nivel1 {
  30. margin-right: 1px; float: left;
  31. }
  32. #menu ul li a {
  33. padding: 8px;
  34. color: #666;
  35. text-decoration: none;
  36. display: block;
  37. position: relative;
  38. display: block;
  39. text-decoration: none;
  40. text-transform: uppercase;
  41. font-size: 10px;
  42. letter-spacing : 2px;
  43.  
  44. text-align: center;
  45. }
  46. #menu ul li a.nivel2 {
  47. color: rgb(0, 0, 0);
  48. margin-left:0px;
  49. }
  50. #menu ul li a.nivel2ie {
  51. color: rgb(0, 0, 0);
  52. margin-left:0px;
  53. }
  54. #menu ul li a.nivel1 {
  55. display: block !important; position: relative;
  56. }
  57. #menu ul li a.nivel2 {
  58. display: block !important; position: relative;
  59. }
  60. #menu ul li:hover {
  61. position: relative;
  62. }
  63. #menu ul li a:hover {
  64. color: #999;
  65. position: relative;
  66. background: url(../imagenes/pmta.gif) repeat-x;
  67. }
  68. #menu ul li:hover a.nivel1 {
  69. color: #666;
  70. position: relative;
  71. background: url(../imagenes/pmta.gif) repeat-x;
  72. }
  73. #menu ul li ul {
  74. display: none;
  75. background: url(../imagenes/pmt.gif) repeat-x;
  76. background-color:#FFF
  77. }
  78. #menu ul li:hover ul.nivel2 {
  79. left: -60px; display: block; position: absolute;
  80. }
  81. #menu ul li a:hover ul.nivel2 {
  82. left: -60px; display: block; position: absolute;
  83. }
  84. #menu ul li ul li a:hover ul.nivel3 {
  85. left: 180px !important;
  86. top: 0px !important;
  87. display: block;
  88. position: absolute;
  89. text-color: #F0F;
  90. }
  91. #menu ul li ul li:hover ul.nivel3 {
  92. left: 160px !important; top: 0px !important; display: block; position: absolute;
  93. }
  94. #menu ul li ul li a {
  95. padding: 8px 0px; width: 180px; border-top-color: transparent;
  96. }
  97. #menu ul li ul li a:hover {
  98. border-top-color: #CCC;
  99. position: relative;
  100. }
  101. #menu ul li ul li ul li a.primera {
  102. border-top-color: #CCC;
  103. }
  104. table.falsa {
  105. border: 0px currentColor; float: left; border-collapse: collapse; position: relative;
  106. }
  #6 (permalink)  
Antiguo 31/08/2012, 02:25
 
Fecha de Ingreso: octubre-2009
Mensajes: 299
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: Error menu desplegable
Hola,
Ha solucionado parte, pero sigue aparencien el taleral que no consigo eliminar.
Código: 
#menu {
width: 900px;
text-align: center;
font-size: 12px;
position: absolute;
left: 0px;
top: 210px;
height: 30px;
background: url(../imagenes/pmt.gif) repeat-x;
z-index: 10;
text-align: center;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCC;
border-bottom-color: #CECFCE;
}
#menu ul {
list-style-type: none;
margin-top: 0px;
margin-left:25px
 
 
}
#menu ul li {
width: 190px;
}
#menu ul li.nivel1 {
margin-right: 1px; float: left;
}
#menu ul li a {
padding: 8px;
color: #666;
text-decoration: none;
display: block;
position: relative;
display: block;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
letter-spacing : 2px;
 
text-align: center;
}
#menu ul li a.nivel2 {
color: rgb(0, 0, 0);
margin-left:0px;
}
#menu ul li a.nivel2ie {
color: rgb(0, 0, 0);
margin-left:0px;
}
#menu ul li a.nivel1 {
display: block !important; position: relative;
}
#menu ul li a.nivel2 {
display: block !important; position: relative;
}
#menu ul li:hover {
position: relative;
}
#menu ul li a:hover {
color: #999;
position: relative;
background: url(../imagenes/pmta.gif) repeat-x;
}
#menu ul li:hover a.nivel1 {
color: #666;
position: relative;

}
#menu ul li ul {
display: none;
background: url(../imagenes/pmt.gif) repeat-x;
background-color:#FFF
}
#menu ul li:hover ul.nivel2 {
left: -65px; display: block; position: absolute;
}
#menu ul li a:hover ul.nivel2 {
left: -65px; display: block; position: absolute;
}
#menu ul li ul li a:hover ul.nivel3 {
left: 180px !important;
top: 0px !important;
display: block;
position: absolute;
text-color: #F0F;
}
#menu ul li ul li:hover ul.nivel3 {
left: 165px !important; top: 0px !important; display: block; position: absolute;
}
#menu ul li ul li a {
padding: 8px 0px; width: 190px; border-top-color: transparent;
}
#menu ul li ul li a:hover {
border-top-color: #CCC;
position: relative;
}
#menu ul li ul li ul li a.primera {
border-top-color: #CCC;
}
table.falsa {
border: 0px currentColor; float: left; border-collapse: collapse; position: relative;
}
Adjunto una imagen
  #7 (permalink)  
Antiguo 31/08/2012, 05:43
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 12 años, 4 meses
Puntos: 86
Respuesta: Error menu desplegable
sube un demo a la web para verla es dificil ver la falla en una imagen...Saludos!
  #8 (permalink)  
Antiguo 18/12/2012, 01:35
 
Fecha de Ingreso: octubre-2009
Mensajes: 299
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: Error menu desplegable
Hola!
Retomo este tema! El enlace de la web es este (hasta ayer no habia podido colgar la página)
ENLACE

Gracias!
  #9 (permalink)  
Antiguo 18/12/2012, 22:13
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 10 meses
Puntos: 306
Respuesta: Error menu desplegable


Fijate que la segunda lista (nivel2) tiene un padding de 40px.
No encontré donde lo tienes especificado, así que supongo que es el padding por defecto del navegador.

Prueba colocando un reset css.
Algo como:

Código CSS: 
Ver original
  1. *{margin:0;
  2. padding:0;
  3. }

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: desplegable, hover, imagenes, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:17.