Menu deroulant horizontal pas correct

Fermé
wallash Messages postés 25 Date d'inscription lundi 16 octobre 2006 Statut Membre Dernière intervention 1 décembre 2009 - 31 août 2009 à 16:17
Bonjour,
je suis entrain de mettre en place un menu déroulant dont j'ai pris le code dans un forum et il fonctionnait d'abord bien sous les navigateurs ressent, mais sous IE6 il ne fonctionnait pas.j'ai modifier maintenant il fonctionne bien sous IE mais seulement sur les navigateur ressent il s'affiche en l'envers, comment résoudre ce problème ?

code html

<div id="menu_horizontal">
<div id="menu">
<ul>
<li><a href="index.php?page=contact">Contact us</a></li>
<li><a href="index.php?page=careers">Careers</a></li>
<li onmouseover="montre('menu_pa',true);" onmouseout="montre('menu_pa',false);"><a href="index.php?page=partners">Partners</a>
<ul id="menu_pa">
<li><a href="#">LIKUSASA</a></li>
</ul>
</li>
<li onmouseover="montre('menu_so',true);" onmouseout="montre('menu_so',false);"><a href="index.php?page=solutions">Solutions</a>
<ul id="menu_so">
<li><a href="index.php?page=fiberins">Fiber installation</a></li>
<li><a href="index.php?page=sitecons">Site Construction</a></li>
<li><a href="index.php?page=solarener">Solar Energy Solution</a></li>
<li><a href="index.php?page=turnso">Turnkey Solution</a></li>
</ul>
</li>
<li onmouseover="montre('menu_cp',true);" onmouseout="montre('menu_cp',false);" style="border-left: 1px solid #ccc;"><a href="index.php?page=compro">Company Profile</a>
<ul id="menu_cp">
<li><a href="index.php?page=profile">Profile</a></li>
<li><a href="index.php?page=vimi">Vision & Mission</a></li>
<li><a href="index.php?page=value">Value</a></li>
</ul>
</li>
</ul>
</div>
</div>


code JS

<script>
<!--
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;

//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
var d = document.getElementById(id);
//si on quitte un élément du menu
if (d && !affiche)
{
d.style.display='none'; //on l'efface
var c=d.parentNode; //son parent
if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on rend à son parent les couleurs d'origine
{
c.firstChild.style.color='#39f';
c.firstChild.style.background='#fff';
}
}
//sinon si on se mets sur un élément du menu
else if (d && affiche)
{
d.style.display='block'; //on l'affiche
var c=d.parentNode; //son parent
if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
{
c.firstChild.style.color='#fff';
c.firstChild.style.background='#39f';
}
}
}
//-->
</script>

code css pour IE

#menu_horizontal{
height: 30px;
background: url(../images/menu_horizontal_bg.jpg) repeat-x;
}
ul, li {
list-style-type:none;
}

#menu ul li {
position:relative;
float:right;
width:100px;
cursor:pointer;
display:block;
background:none;
height:29px;
}
#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menu li{
margin: auto;
padding: 0;
float: left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#menu li a{
display:block;
padding: 7px;
width: 100px;
color: #fff;
text-decoration: none;
}
#menu li:hover ul li{
float: none;
text-align: center;
/* background: transparent url("") repeat; */
background-color: #DFDFDF;
}

#menu ul li:hover ul{
display: block;
}


#menu ul li ul {
display:none;
position:absolute;
width:100px;
border-top:none;
border-left: 1px solid #ccc;
left:0;
}

#menu{
height: 30px;
width: 586px;
margin-left: auto;
margin-right: auto;
}

#menu ul li ul li {
height:100%;
}

#menu ul li ul li a {
color:#fff;
display:block;
height:100%;
border-top:1px solid #dddddd;
background-color:#DFDFDF;
}

#menu ul li ul li a:hover {
color:#ffffff;
background-color: #000099;
}

code css pour firefox et opera


#menu_horizontal{
height: 30px;
background: url(../images/menu_horizontal_bg.jpg) repeat-x;
border-bottom: 1px solid #ccc;
}

#menu{
height: 30px;
width: 586px;
margin-left: auto;
margin-right: auto;
}

#menu ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#menu li{
margin: auto;
padding: 0;
float: left;
border-right: 1px solid #ccc;
}

#menu li a{
display:block;
padding: 7px;
width: 100px;
color: #fff;
text-decoration: none;
}

#menu li a:hover{
}

#menu ul li ul{
display: none;
}

#menu ul li ul li:hover{
background-color: #000099;
}

#menu ul li:hover ul{
display: block;
}

#menu li:hover ul li{
float: none;
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
background-color: #DFDFDF;
}

#menu li ul{
position:absolute;
}