Foros del Web » Creando para Internet » CSS »

Problema con Menu CSS

Estas en el tema de Problema con Menu CSS en el foro de CSS en Foros del Web. Saludos me he bajado un menu y lo he podido adaptar a mi gusto. El asunto es que lo he probado en un HTML solo ...
  #1 (permalink)  
Antiguo 04/05/2010, 10:08
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 21 años, 7 meses
Puntos: 3
Exclamación Problema con Menu CSS

Saludos me he bajado un menu y lo he podido adaptar a mi gusto. El asunto es que lo he probado en un HTML solo y ha funcionado perfecto, pero cuando lo llevo al HTML donde estoy diseñando, y lo inserto en una celda de la tabla, donde deberia ir el menu, algunos botones se separan unos de otros. Dejando como un margin de unos 2px aprox entre ellos, lo cual hace se vea mal. Los botones que se separan son los que tienen un sub-menu dentro, los otros no.

Gracias de antemano.

Anexo Código Css:

.menu {
z-index:1000;
font-size:90%;
margin:25px 0 50px 15px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
background:#a3cc52;
height:26px;
}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#fff;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {background:#d4d8bd; width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color:#fff; background:#949e7c;}

.menu :hover > a {
color:#fff;
background:#949e7c;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->


<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->

Código HTML:

<div class="menu">
<ul>
<li class="sub"><a href="#nogo"> Regu <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../index.html">P</a></li>
<li><a href="../index.html">Po</a></li>
<li class="sub"><a href="#nogo">Vir<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../index.html">Pr</a></li>
<li><a href="../index.html">Pot</a></li>
</ul></ul>
<li class="sub"><a href="#nogo">NIn<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="sub"><a href="#nogo">Pr2 <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../index.html">Guis </a></li>
<li><a href="../index.html">Re22</a></li>
<li><a href="../index.html">Reg222</a></li>
<li><a href="../index.html">Est</a></li>
</ul>
<li class="sub"><a href="#nogo">Po21<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../index.html">Gu231</a></li>
<li><a href="../index.html">R21tos</a></li>
<li><a href="../index.html">Re32</a></li>
<li><a href="../index.html">Estad21</a></li>
</ul>
</ul>
</li>

<li><a href="#nogo">Item vacio</a></li>

<li class="sub"><a href="#nogo">Item 3 <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../index.html">Item 3a</a></li>
<li class="sub"><a href="#nogo">Item 3b<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../index.html">Item 3bi</a></li>
<li><a href="#nogo">Item 3bii</a></li>
<li class="sub"><a href="#nogo">Item 3biii <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Item 3biii-1</a></li>
<li><a href="#nogo">Item 3biii-2</a></li>
<li><a href="#nogo">Item 3biii-3</a></li>
<li><a href="#nogo">Item 3biii-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">Item 3c</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">Item 4</a></li>
<li><a href="#nogo">Item 5</a></li>
<li><a href="#nogo">Item 6</a></li>

</ul>
</div>


</div>
  #2 (permalink)  
Antiguo 06/05/2010, 00:07
Avatar de anfergon  
Fecha de Ingreso: junio-2009
Mensajes: 44
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: Problema con Menu CSS

Hola:

Lo he visto recién en Firefox y en IE8 y lo vi bien. Lo coloqué en una celda de una tabla, y también funcionó bien. Esto me da la pista de que el problema quizá se encuentre en la celda. Si colocaras las propiedades de la celda, quizá te pudiera ayudar.
  #3 (permalink)  
Antiguo 06/05/2010, 09:48
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 21 años, 7 meses
Puntos: 3
Respuesta: Problema con Menu CSS

Gracias por responder, aparentemente si era problema de la celda, cree otra tabla y se solucionó. Ahora lo que me pasa es que ciertos Sub-menues al desplegarce quedan detras de otros elementos (los llamados content tabs o pestañas) que estan al lado. He modificado en Z-index del elemento y nada...

cualquier ayuda es buena!!! Gracias de antemano!

Etiquetas: Ninguno
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




La zona horaria es GMT -6. Ahora son las 00:05.