Desborde en Chrome y Safari

popi · #1 (**permalink**) 07/04/2010, 03:31

Buenos días,

Tengo un problema con un menu desplegable que me lleva de cabeza desde hace algunos días y no doy con el problema.
El problema esta en que en Chrome y Safari se me desborda el submenú y este se me desplaza hacia abajo. Lo raro es que cuando luego selecciono cualquier otra opción del menú y luego accedo otra vez al submenú, luego no se descuadra. Solo se descuadra al acceder en la página.

Éste menú desplegable, dispone de un archivo css y un archivo js, yo diría que esta anomalía se debe al css, pero no estoy seguro, a ver si me podéis echar un cable.

Os muestro el código 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>
    <title></title>
<link rel="stylesheet" type="text/css" href="css/menudesplegable.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquerycssmenu.js"></script>
    
</head>
<body>
    
<div id="myjquerymenu" class="jquerycssmenu">
<ul>
<li><a href="#"><img src="images/inicio.jpg" border="0px"/></a></li>
<li><a href="#"><img src="images/prevista.jpg" border="0px"/></a></li>
<li><a href="#"><img src="images/suscripcion.jpg" border="0px"/></a></li>
<li><a href="#"><img src="images/anuncios.jpg" border="0px"/></a>

  <ul>
  <li><a href="#">Consultar</a></li>
  <li><a href="#">Publicar</a></li>
 
  </ul>
</li>
<li><a href="#"><img src="images/contacto.jpg" border="0px"/></a></li>

</ul>
<br style="clear: left" />
</div>

</body>
</html>

El código CSS:

Código HTML:

.jquerycssmenu{
width:638px;
height:17px;
}
.jquerycssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jquerycssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jquerycssmenu ul li a{
display: block;
text-decoration: none;
}
/*1st sub level menu*/
.jquerycssmenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jquerycssmenu ul li ul li a{
font: bold 12px Verdana;
width: 88px; /*width of sub menus*/
background-color:#CCCCCC;
border:1px solid #333333;
color:#333333;
padding: 5px 15px;
margin: 0;
}
.jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
background-color:#999999;
text-decoration:underline;
color: black;
}

A ver si me podéis ayudar,

Muchas gracias

emiliodeg · #2 (**permalink**) 07/04/2010, 11:05

utiliza el jquery.browser y pon un minihack para chrome y safari

popi · #3 (**permalink**) 08/04/2010, 00:52

Gracias Emilio por la respuesta,

En principio no soy muy partidario de utilizar hacks, gracias por la respuesta, voy a intentar dedeicarle unas horas más a ver si encuentro el problema

Saludos