Mi problema se puede ver aquí: http://www.buyplus.es/borrar.html
Cuando pulsas sobre "Nosotros" el desplegable se abre sin problemas, pero al pulsar sobre "clientes" el submenú se despliega a la izquierda arriba en vez de debajo, como debería.
EL código html del menú es este:
<div id="caja_botonera">
<ul class="menu">
<li><a href="contacto.html" id="contacto" ></a></li>
<li><a href="clientes.html" id="clientes" ></a>
<ul>
<li><a href="marcas.html" id="marcas" ></a></li>
<li><a href="acceso.html" id="acceso" ></a></li>
</ul>
</li>
<li><a href="servicios.html" id="catalogo" ></a></li>
<li><a href="nosotros.html" id="nosotros" ></a>
<ul>
<li><a href="marcas.html" id="proyecto" ></a></li>
<li><a href="acceso.html" id="noticias" ></a></li>
<li><a href="acceso.html" id="trabaja" ></a></li>
</ul>
</li>
</ul>
</div>
He utilizado imágenes como enlaces, aqui está el css:
/*menu_display*/
ul.menu
{
list-style:none;
padding:0;
}
ul.menu ul
{
display:none;
list-style:none;
background-color:#FFF;
}
.menu ul li ul {
display: none;
background: #fff;
}
ul.menu li:hover ul
{
display:block;
width: 159px;
background-color:#FFF;
padding:0;
}
/*botones*/
#contacto
{
width:130px;
height:50px;
background-image:url(contacto.png);
float:right;
background-repeat:no-repeat;
}
#contacto:hover, #contacto_n
{
width:130px;
height:50px;
background-image:url(contacto.png);
float:right;
background-position:bottom;
background-repeat:no-repeat;
}
#clientes
{
width:123px;
height:50px;
background-image:url(clientes.png);
float:right;
}
#clientes:hover, #clientes_n
{
width:123px;
height:50px;
background-image:url(clientes.png);
float:right;
background-position:bottom;
}
#catalogo
{
width:122px;
height:50px;
background-image:url(catalogo.png);
float:right;
}
#catalogo:hover, #catalogo_n
{
width:122px;
height:50px;
background-image:url(catalogo.png);
float:right;
background-position:bottom;
}
#nosotros
{
width:159px;
height:50px;
background-image:url(nosotros.png);
float:left;
}
#nosotros:hover, #nosotros_n
{
width:159px;
height:50px;
background-image:url(nosotros.png);
float:left;
background-position:bottom;
}
/*sub-botonera: nosotros*/
#proyecto
{
width:159px;
height:24px;
background-image:url(bot_proyecto.png);
background-repeat:no-repeat;
float:left;
}
#proyecto:hover
{
width:159px;
height:24px;
background-image:url(bot_proyecto.png);
background-position:bottom;
background-repeat:no-repeat;
float:left;
}
#noticias
{
width:159px;
height:24px;
background-image:url(bot_noticias.png);
background-repeat:no-repeat;
float:left;
}
#noticias:hover
{
width:159px;
height:24px;
background-image:url(bot_noticias.png);
background-position:bottom;
background-repeat:no-repeat;
float:left;
}
#trabaja
{
width:159px;
height:24px;
background-image:url(bot_trabaja.png);
background-repeat:no-repeat;
float:left;
}
#trabaja:hover
{
width:159px;
height:24px;
background-image:url(bot_trabaja.png);
background-position:bottom;
background-repeat:no-repeat;
float:left;
}
/*fin_sub-botonera: nosotros*/ /*sub-botonera: clientes*/
#marcas
{
width:123px;
height:37px;
background-image:url(bot_marcas.png);
background-repeat:no-repeat;
float:left;
position:relative;
}
#marcas:hover
{
width:123px;
height:37px;
background-image:url(bot_marcas.png);
background-position:bottom;
background-repeat:no-repeat;
position:relative;
}
#acceso
{
width:123px;
height:24px;
background-image:url(bot_acceso.png);
background-repeat:no-repeat;
position:relative;
}
#acceso:hover
{
width:123px;
height:24px;
background-image:url(bot_acceso.png);
background-position:bottom;
background-repeat:no-repeat;
position:relative;
}
Ojalá descubran cuál es el problema! Muchas gracias.
