Hola a todos. A ver si alguien me puede ayudar porque me estoy volviendo un poquito loca ya.
Tengo un menú desplegable en javascript creado con una lista horizontal. Todo funcionaba bien pero la lista tiene un background y quise centrar la lista para que ocupara el centro de la imagen de la fondo.
Este es el css:
ul .dropmenu{
position: relative;
display:block;
height: 75px;
background-image:url(../img/home/fondo-menu.png);
width:1001px;
text-align:center;
}
.dropmenu li{
position: relative;
list-style: none;
margin: 0px;
padding: 0px;
display: inline-block;
display: -moz-inline-stack; /
*display: inline;
}
.dropmenu ul{
position: absolute;
display: none;
width: 220x;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #1F2632 repeat-x scroll 0 0;
text-align:left;
}
.dropmenu ul li{
width: 220px;
display: block!important;
display: -moz-block-stack!important;
*display: block!important;
}
Y este es el ejemplo del html de uno de los elementos:
<ul class="dropmenu">
<li>
<a href="">Elemento padre</a>
<ul>
<li><a href="">hijo1</a></li>
<li><a href="">hijo2</a></li>
<li><a href="">hijo3</a></li>
</ul>
</li>
</ul>
El caso es que, tal y como está, en IE8 se ve perfecto, los elementos de la lista están centrados y al pasar el ratón sobre cada uno de ellos, se despliega la segunda lista. Pero en FF, también está centrado, pero cada lista desplegable aparece siempre a la izquierda del todo de la lista primera y no bajo su elemento correspondiente como debería ser...
Espero haberme explicado más o menos y que alguien pueda ayudarme.
Muchas gracias por adelantado