Soucis avec un menu déroulant en css [Résolu]

Bonjour à tous,

Ceci est mon premier message sur le Forum, mais ce n'est pas ma première visite.
Je suis web master très très amateur, et autodidacte. J'ai créée moi même le site de mon club de sport, en cherchant au fur et à mesure les connaissances pour réaliser les projets de mes envies.

Dernièrement je me suis mis sur un menu déroulant en css, et j'en suis plutôt content. J'ai utilisé la méthode des portes coulissantes pour mes background, et j'ai un petit souci sur la partie gauche de deux des onglets (ceux qui ont justement une liste déroulante, ainsi que les sous menu) qui ne se comportent pas comme ils le devraient.

Je vous laisse regarder le résultat, en survolant l'onglet "infos" ou "medias"
http://www.sudkravmaga.com/index2.php

Voici mon code, ne vous arrachez pas les cheveux en criant "au profane", comme je le disait je suis très amateur

Le HTML

<div id="menu2">
<ul>
  <li  id="current" ><a href="#">ACCUEIL</a></li>
  <li class="krav"><a href="krav.php">LE KRAV MAGA</a></li>
  <li><a href="club.php">LE CLUB</a></li>
  <li><a href="#">INFOS</a>
    <ul>
      <li><a href="club.php#horaires">HORAIRES</a></li>
      <li><a href="club.php#tarifs">TARIFS</a></li>
      <li><a href="agenda.php">AGENDA</a></li>
    </ul>
    </li>
    <li><a href="#">MEDIAS</a>
     <ul>
      <li><a href="photos.php">PHOTOS</a></li>
      <li><a href="video.php">VIDEOS</a></li>
    </ul>
  </li>
  <li class="faq"><a href="FAQ.php">F.A.Q</a></li>
  <li><a href="contact.php">CONTACT</a></li>
</ul>
</div>

Le Css

 
#menu2 ul {
 margin:0;
 padding:0;
 list-style:none;
 text-align:center;
 font-family: Arial;
 
 font-size:11pt;
 margin:0;
 padding:0;
 }	


#menu2 li {
 float:left;
 width: 136px;
 height: 32px;
 background:url(../Images/design/droit_bout_menu_krav_maga_montpellier.png)
 no-repeat right top;
 background-position:100% 0px;
 }
#menu2 li a {
 display:block;
 color:white;
 text-decoration:none;
 padding:6px;
 background:url(../Images/design/gauche_bout_menu_krav_maga_montpellier.png)
 no-repeat left top;
 background-position:0% 0px;
 }
#menu2 li.krav {
 width: 167px;
 }
#menu2 li.faq {
 width: 106px;
 }
 
 
 #menu2 li#current {
  background-position:100% -64px;
 }
#menu2 li#current a{
   background-position:0% -64px;
 }
 
 
 #menu2 li:hover {
background-position:100% -32px;
 }
#menu2 li a:hover {
background-position:0% -32px;
 }
 


#menu2 ul li ul {
 display: none;
 font-size: 70%;
 } 
#menu2 ul li:hover ul {
 display:block;
 }
#menu2 li:hover ul li {
 float:none;
  background: none;
 }
#menu2 li ul {
 position:absolute;
 }
#menu2 ul li ul li a{
 background:url(../Images/design/petit_bout_menu_krav_maga_montpellier.png)
 no-repeat top;
}
#menu2 ul li ul li:hover{
 background: url(../Images/design/petit_bout_menu_krav_maga_montpellier.png)
 no-repeat bottom;
}

J'y ai passé la journée hier, et j'avoue que si je poste ici et ose vous solliciter, c'est que vraiment je tourne en rond.

D'avance merci à vous
Modifié par Nunux (12 Feb 2013 - 11:14)

Bonjour,
Le problème provient-il bien du calage du background?
Est-ce bien ça?
Juste pour vérifier avant de répondre à côté.

Oui tout à fait, la partie gauche de l'image se décale alors que la partie centrale non, de même sur les boutons déroulants, lors du survol, un autre fond apparait, peu être hérité de son parent, mais je n'ai pas su le maitriser.
Merci

Hello Nunux,

Il manque le background-position de la balise <a> lorsque le li est survolé.
Ajoute ça dans ton CSS, ça devrait marcher :

#menu2 li:hover  a{
background-position:0% -32px;
 }

Le problème lors du survol du sous-menu vient de ton image petit_bout_menu_krav_maga_montpellier.png. Sur la partie rouge, à gauche, tu as laissé un peu de fond gris. Il faut la rogner un peu.

Les esprits se rencontrent.

Pourquoi ce remplacement?
Le rendu est normal: texte blanc et bg blanc et hover jaune.

Ça ne serait pas plutôt

#menu2 ul li ul li [b]a[/b]:hover{
 background-color: yellow;
}

Le remplacement pour me rendre compte qu'au survol, mon menu comporte un bout d'image sur la gauche.
Je voudrais remplacer complétement le background du menu déroulé, par l'image "petit_bout_menu_krav_maga_montpellier.png", avec deux positions différentes, selon qu'il soit survolé ou non.

@ Ozelian -> A propos des anciens navigateurs, ils ne représentent qu'une très très faible quantité de ma cible, donc autant dire je laisse de coté
Modifié par Nunux (11 Feb 2013 - 18:56)

Bon, j'ai fait un bout de correction hier, et même si le résultat n'est pas parfait à 100%, il me convient

J'ai simplement mis ca en place

#menu ul li ul li a:hover{
	 background-position:100% 0px;
}
#menu ul li ul li a{
 background:url(../Images/design/petit_bout_menu_krav_maga_montpellier.png);
 }

Merci à vous pour le coup de main