Problema con rollover

[reusin]

Tengo un menú sencillito creado con CSS y al tratar de crear el cambio de imagen al pasar el cursor por encima, resulta que en vez de cambiarse esa opción, se me cambia de golpe todo el menú. Soy bastante inexperto y será una tontería pero no la encuentro. Adjunto el CSS para ver si hay algo extraño y si me podéis echar una mano. GRacias

ul.menu
{
text-align:center;
list-style:none;
font-family:"Times New Roman", Times, serif;
padding:4px;
text-align:left;
vertical-align:top;
}
ul.menu li
{
position:relative;
margin-bottom: 4px;
width:110px;
padding:2px;
background-image:url(../Imagenes/Fondos/fd_menurojo1.gif);
display:block;

}
ul.menu:hover li
{
position:relative;
margin-bottom: 4px;
width:110px;
padding:2px;
background-image:url(../Imagenes/Fondos/fd_menuazul1.gif);
display:block;


}
ul.menu ul
{
position:absolute;
left:75px;
top:0px;
display:none;
list-style:none;
}

ul.menu li:hover > ul
{
display:list-item;
}

[exxqizofrenicoo]

la primera cosa que veo es que repites las cosas.
en css se heredan los atributos.

ul.menu li
{
position:relative;
margin-bottom: 4px;
width:110px;
padding:2px;
background-image:url(../Imagenes/Fondos/fd_menurojo1.gif);
display:block;

}
ul.menu:hover li
{
background-image:url(../Imagenes/Fondos/fd_menuazul1.gif);
}

no es necesario escribir lo mismo en este caso.

dejanos el html tambien asi lo pruebo porque nose como tienes creada las listas.
o mejor si lo tienes alojado en algun lado dejanosla url

saludos

[reusin]

No, todavía no lo tengo en la web. La lista es esta

<ul class="menu">
<li>Inicio</li>
<li>Noticias</li>
<li>Resultados</li>
<li>Federados
<ul>
<li>Juvenil Masculino</li>
<li>Juvenil Femenino</li>
<li>Cadete Masculino</li>
<li>Cadete Femenino</li>
<li>Infantil Masculino</li>
<li>Infantil Femenino</li>
<li>Alevín Masculino</li>
</ul>
</li>
<li>Escuela
<ul>
<li>Benjamín "A"</li>
<li>Benjamín "B"</li>
<li>Benjamín "C"</li>
<li>Benjamín "D"</li>
<li>Prebenjamín "A"</li>
<li>Prebenjamín "B"</li>
<li>Prebenjamín "C"</li>
<li>Mini</li>
</ul>
</li>
<li>Local
<ul>
<li>Preferente</li>
<li>Primera</li>
</ul>
</li>
<li>Club</li>
<li>Rincón del socio</li>
<li>Sponsors</li>
<li>Enlaces</li>
<li>Contacta</li>
</ul>

Gracias!

[jomaruro]

Hola:

Sabiendo que es un menú que enlaza distintas opciones, lo que veo es que faltan (en el HTML) precisamente los enlaces a href y en el CSS debes aplicar la pseudoclase :hover al enlace a:hover.

Saludos.

[tredio]

no es necesario que sea un enlace para poner el evento hover, solo lo esta asignando mal, tendrias que hacerlo de la siguiente manera.

Código CSS:

ul.menu li
{
position:relative;
margin-bottom: 4px;
width:110px;
padding:2px;
background-image:url(../Imagenes/Fondos/fd_menurojo1.gif);
display:block;
 
}
ul.menu li:hover
{
background-image:url(../Imagenes/Fondos/fd_menuazul1.gif);
}
 

[jomaruro]

Hola:

Cierto, pero también si está usando IE6, la pseudoclase :hover sólo funciona en los enlaces.

Saludos.

[reusin]

Muchas gracias a los dos.
Era como decia "tredio" por la asignación.
Jomaruro: de momento no son enlaces(por eso no tiene lo 'a href'), pero lo serán :)