En esta URL podéis ver unos submenus colgando. En teoría van con "display:none" para hacer un ":hover" pero es para explicar el problema.
Si lo veis con FF o con IE(6) ok, pero en opera no puedo hacer que se vea igual.
Al verlo con Opera se rompe la posición y tira todo hacia abajo. El problema está en que cada LI del menu tiene position:relative; porque si quitamos esto, todo vuelve a su posicion 0 0 contando desde la izquierda del UL principal para todos los navegadores.
C S S
Código :
ul#nav {
text-align:center;
margin-bottom:18px;
position:relative;
}
ul#nav li {
text-transform:uppercase;
font-weight:bold;
display:inline;
background:url(../img/dot_idiomas.png) no-repeat left center;
padding-left:5px;
position:relative;
letter-spacing:-.02em;
}
ul#nav li a, #nav li a:hover {
background:none;
text-decoration:none;
color:#000;
}
ul#nav li.ultimo {
background:none;
padding:0;
}
ul#nav li:hover ul {
display:block;
}
ul#nav li ul {
position:absolute;
top:17px;
left:0;
text-align:left;
background:#4c4c4c url(../img/bg_menu.png) repeat-x left -5px;
border:1px solid #000;
/*display:none;*/
z-index:20;
opacity:.9;
}
ul#nav li ul li {
padding:0;
background:none;
min-width:180px;
width:180px;
display:block;
letter-spacing:0;
}
ul#nav li ul li a {
line-height:1.4em;
height:100%;
display:block;
color:#fff;
padding:4px 5px;
}
ul#nav li li a:hover {
background:#9a9a9a;
color:#fff;
} 