28172 sujets

CSS et mise en forme, CSS3

Re-bonjour,

Décidemment, IE6 m'en fait voir aujourd'hui Smiley eek
J'ai maintenant un probleme dans mon menu qui se compose comme ceci :

CSS :

#navigation {
	margin-left:20px;
	padding-top:4px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.9em;
}
#navigation a {
	color: #4d463a;
	font-weight:bold;
	text-decoration:none;
}
#menu_accueil{
	float:left;
	padding-left:6px;
	padding-right:6px;
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;
	width:50px;
}
#menu_mode{
	float:left;
	padding-left:6px;
	padding-right:6px;
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;
	width:164px;
}
#menu_reception{
	float:left;
	padding-left:6px;
	padding-right:6px;
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;
	width:69px;
}
#menu_annonce{
	float:left;
	padding-left:6px;
	padding-right:6px;
	padding-top:0px;
	padding-bottom:0px;
	margin:0px;
	width:125px;
}
#sous_menu_mode{
	position:absolute;
	margin-top:16px;
	margin-left:68px;
	width:230px;
	display: none;
	position:absolute;
	border-top:solid;
	border-width:5px;
	border-top-color:#ff6b79;
	background: #4d473b;
}
#sous_menu_reception{
	position:absolute;
	margin-top:16px;
	margin-left:245px;
	width:230px;
	display: none;
	border-top:solid;
	border-width:5px;
	border-top-color:#ff6b79;
	background: #4d473b;
}
#sous_menu_annonce{
	position:absolute;
	margin-top:16px;
	margin-left:325px;
	width:230px;
	display: none;
	position:absolute;
	border-top:solid;
	border-width:5px;
	border-top-color:#ff6b79;
	background: #4d473b;
}
#sous_menu_mode ul{
	list-style: none ;
	margin: 10px ;
	padding: 0px ;
}
#sous_menu_reception ul{
	list-style: none ;
	margin: 10px ;
	padding: 0px ;
}
#sous_menu_annonce ul{
	list-style: none ;
	margin: 10px ;
	padding: 0px ;
}
#sous_menu_mode li a{
	display:block;
	width:203px;
	line-height:1em;
	font-family:Arial, Helvetica, sans-serif;
	color:#ffffff;
	text-decoration:none;
	font-size:12px;
	padding:4px;
}
#sous_menu_reception li a{
	display:block;
	width:203px;
	line-height:1em;
	font-family:Arial, Helvetica, sans-serif;
	color:#ffffff;
	text-decoration:none;
	font-size:12px;
	padding:4px;
}
#sous_menu_annonce li a{
	display:block;
	width:203px;
	line-height:1em;
	font-family:Arial, Helvetica, sans-serif;
	color:#ffffff;
	text-decoration:none;
	font-size:12px;
	padding:4px;
}

#sous_menu_mode li a:hover, #sous_menu_mode li a:focus, #sous_menu_mode li a:active {
	text-decoration: none;
	color:#ff6b79;
	background-color:#383127;
}
#sous_menu_reception li a:hover, #sous_menu_reception li a:focus, #sous_menu_reception li a:active {
	text-decoration: none;
	color:#ff6b79;
	background-color:#383127;
}
#sous_menu_annonce li a:hover, #sous_menu_annonce li a:focus, #sous_menu_annonce li a:active {
	text-decoration: none;
	color:#ff6b79;
	background-color:#383127;
}


Et voici le html :
<div id="navigation">
  	<div id="menu_accueil"><a href="">Accueil</a></div>
    <div onmouseover="javascript:montre('sous_menu_mode');" onmouseout="javascript:cache('sous_menu_mode');" id="menu_mode"><a href="">Mode</a></div>
    <div id="sous_menu_mode" onmouseover="javascript:montre('sous_menu_mode');" onmouseout="javascript:cache('sous_menu_mode');">
      <ul>
        <li><a href="">mode homme</a></li>
        <li><a href="">mode femme</a></li>
              </ul>
    </div>
    <div onmouseover="javascript:montre('sous_menu_reception');" onmouseout="javascript:cache('sous_menu_reception');" id="menu_reception"><a href="">R&eacute;ception</a></div>
    <div id="sous_menu_reception" onmouseover="javascript:montre('sous_menu_reception');" onmouseout="javascript:cache('sous_menu_reception');">
      <ul>
        <li><a href="">Salle</a></li>
      </ul>
    </div>
    <div onmouseover="javascript:montre('sous_menu_annonce');" onmouseout="javascript:cache('sous_menu_annonce');" id="menu_annonce"><a href="">Petites annonces</a></div>
    <div id="sous_menu_annonce" onmouseover="javascript:montre('sous_menu_annonce');" onmouseout="javascript:cache('sous_menu_annonce');">
      <ul>
        <li><a href="">Consulter les annonces</a></li>
        <li><a href="">Déposer votre annonce</a></li>
      </ul>
    </div>
  </div>


Sous IE6 quand je passe au dessus de mon menu Mode, ou annonce, le sous menu s'affiche en partant de la fin de la div "annonce". J'ai essayé avec un clear:both pour annuler l'align:left, mais la c'est encore pire. Vous avez une idée ?