Menu horizontal déroulant (oui encore un menu déroulant)

Bonjour,

je suis un débutant en html+css et je lis beaucoup en ce moment pour apprendre . Mais actuellement, j'ai 2 problèmes avec mon menu déroulant tout en image (donc avec des images en link et des images aussi en hover).

1 - Le menu marche bien sous FF, Chrome, IE8 mais présente des chevauchements en IE7 et IE6. Je pense que c'est un problème de 'haslayout' mais je ne suis pas sur et je ne sais pas comment le résoudre;

2 - Comme je l'ai dit tout à l'heure, c'est un menu tout en image (c'est la demande donc je suis obligé de faire cela), mais le problème est que lorsque l'on navigue dans les parties déroulées (les sous menu donc), le menu principal ne se met plus en 'hover'. (j'espère que vous me comprenez).

Voici les codes alors :

Le xhtml :

<ul id="main_nav">
    <li id="main_nav_organisme" class="main_nav_li_parent"><a href="#" class="parent">WWWW</a>
        <ul>
            <li><a href="#" class="fils">XXXX</a></li>
            <li><a href="#" class="fils">YYYY</a></li>
            <li><a href="#" class="fils">ZZZZ</a></li>
            <li><a href="#" class="fils">AAAA</a></li>
            <li><a href="#" class="fils">BBBBB</a></li>
        </ul>
     </li>
     <li id="main_nav_services" class="main_nav_li_parent"><a href="#" class="parent">CCC</a>
         <ul>
             <li><a href="#" class="fils">DDDD</a></li>
             <li><a href="#" class="fils">EEEE</a></li>
         </ul>
      </li>                    
      <li id="main_nav_portfolio" class="main_nav_li_parent"><a href="#" class="parent">FFFF</a></li>
      <li id="main_nav_medias" class="main_nav_li_parent"><a href="#" class="parent">Médias</a>
           <ul>
               <li><a href="#" class="fils">GGG</a></li>
               <li><a href="#" class="fils">HHHH</a></li>
               <li><a href="#" class="fils">IIIII</a></li>
           </ul>
        </li>
</ul>

Et le CSS :

/* Gestion menu principal */
#main_nav li.main_nav_li_parent {
	display: block;
}
#main_nav li a.parent { 
	float: left;
	height: 0;
	padding-top: 53px;
	overflow: hidden;
	background-image:url(../img/Main_nav.png);
	background-repeat:no-repeat;
}
#main_nav_organisme a.parent:link {
	background-position: 0 0;
	width:109px;
}
#main_nav_services a.parent {
	background-position: -109px 0;
	width:110px;
}
#main_nav_portfolio a.parent {
	background-position: -219px 0;
	width:108px;
}
#main_nav_medias a.parent {
	background-position: -327px 0;
	width:109px;
}
/* Menu_Hover */
#main_nav_organisme a.parent:hover {
	background-position: 0 -62px;
}
#main_nav_services a.parent:hover {
	background-position: -109px -62px;
}
#main_nav_portfolio a.parent:hover {
	background-position: -219px -62px;
}
#main_nav_medias a.parent:hover {
	background-position: -327px -62px;
}

/* Gestion des sous-menu du menu principal */
#main_nav li ul {
	list-style-type:none;
	display: block;
	visibility: hidden;
	position:absolute;
	width: 220px;
	border-top:2px solid #6e6e6e;
	border-right:2px solid #6e6e6e;
	border-left:2px solid #6e6e6e;
	left:0px;
	top:53px;
}
#main_nav li#main_nav_organisme ul {
	margin-left: 46px;
}
#main_nav li#main_nav_services ul {
	margin-left: 155px;
}
#main_nav li#main_nav_portfolio ul {
	margin-left: 265px;
}
#main_nav li#main_nav_medias ul {
	margin-left: 373px;
}
#main_nav li.main_nav_li_parent:hover ul {
	visibility: visible;
}
#main_nav li.main_nav_li_parent ul li {
	padding: 2px 0px 2px 5px;
	background-color:#e2e2e2;
	border-bottom:2px solid #6e6e6e;
}
#main_nav li.main_nav_li_parent ul li:hover {
	background-color:#818181;
}

ul {
	padding: 0;
	margin: 0;
}

Donc, je vous remercie d'avance pour vos aides et/ou recommandations car comme j'ai dit j'essaie de faire de mon mieux.

PS : SI vous trouvez que le code est vraiment du n'importe quoi, n'hésitez pas à me le dire

EDit : Ajout des 4 dernières lignes de code css.
Modifié par Hertz (13 Oct 2010 - 16:14)

Le code HTML ( la structure ) est bien. Il y a un peu de pollution de classe et tout ça que tu pourrais arranger avec des sélecteurs CSS3 mais bon, c'est pas dramatique. C'est la logique CSS qui n'est pas la meilleure.

En gros, tu fais floater tes liens dans des <li> qui ne les contiennent pas. ( Deja ton float sur tes <a> sert à rien étant donné le position:absolute et encore là.. )

J'ai juste changer ça et ça semblait mieux dans IE

#main_nav li.main_nav_li_parent { 
    display: block; 
	float:left;
	position:relative;
	width:200px;
} 
#main_nav li a.parent {  
	display:block;
    height: 1px; 
    padding-top:53px; 
    overflow: hidden; 
    background-image:url(../img/Main_nav.png); 
    background-repeat:no-repeat; 
	background-color:blue;
} 

Merci beaucoup, comme je l'ai dit tout à l'heure, je commence donc ..... (encore beaucoup de faute)

Pour les liens, je ne voulais pas afficher les textes vu que j'avais des images à la place. je n'ai pas voulu enlever les enlever car j'avais peur pour les futurs référencement.

et encore merci.

Personne n'a de solution pour le hover du menu principal qui ne s'affiche pas lorque que l'on navigue dans les sous-menus?

Merci!

[Edit Soundy : Msg supprimé, pb de css résolu dans un autre post]
Modifié par Soundy (11 Nov 2010 - 19:11)