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