Menu deroulant ok sous firefox, pas sous ie
Rithril
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour a tous.
Je cherche a faire un menu déroulant qui marcherait quelque soit le navigateur, avec des bouts de codes trouvés sur le net, je pensais que le css résoudrait mon problème, mais ce n'est pas le cas.
Sauriez vous ou se situe mon erreur?
le menu marche bien sous firefox, mais pas sous internet explorer.
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css"
<!--
#menu, #menu ul { padding : 0;
margin : 0;
list-style : none;
line-height : 22px;
text-align : center;}
#menu { font-weight : bold;
font-family : calibri;
font-size : 18px;}
#menu a{display : block;
padding : 0;
background : #FF7700;
color : #FFFFFF;
text-decoration : none;
width : 165px; }
#menu li {float : left;
border-right : 1px solid #fff;}
html>body #menu li{border-right: 1px solid transparent ;}
#menu li ul{position: absolute;
width: 165px;
left: -999em;}
#menu li ul li border-top : 1px solid #fff;}
html>body #menu li ul li { border-top : 1px solid transparent;}
#menu li ul ul{ margin : -22px 0 0 165px ;
border-left : 1px solid #fffFFF ; }
html>body #menu li ul ul{border-left : 1px solid}
#menu li:hover ul ul, #menu li.sfhover ul ul {left: -999em; background: #FFFFFF; }
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {left: auto;
min-height: 0;}
#menu a:hover {color: #ff7700;
background: #FFFFFF; }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banniere</title>
<body >
<a href=".//accueil.html" target="haut"<img style="position:fixe;left:0;top:0;width:30%;height:10%;
"src="../Images/logo.jpg" alt="" BORDER="0"/>
<div style="position:absolute;right:0%;top:13%;width:70%;height:100%;">
<ul id="menu">
<li><a href=".//accueil.html" target="haut">Asso</a>
<ul>
<li><a href=".//motpresident.html" target="haut">blabla</a></li>
</ul>
</li>
<li><a href=".//ucp.php?mode=login" target="haut">Membres</a>
<ul>
<li><a href="../php/ucp.php?mode=login" target="haut">Acces membres</a>
<li><a href="#">Sousmenu2</a>
<li><a href="#">Sousmenu3</a>
</ul>
<li><a href="#">menu</a>
<ul>
<li><a href="#">sousmenu1</a>
<ul><li><a href="#">cat1t</a></li>
<li><a href="#">cat2</a></li>
<li><a href="#">Vidéos</a></li>
<li><a href="#">cat4</a></li>
</ul>
</li>
<li><a href="#">menu encore</a>
<ul><li><a href="#">cat1</a></li>
<li><a href="#">cat2</a></li>
<li><a href="#">cat3</a></li>
<li><a href="#">cat4</a></li>
</ul>
</li>
<li><a href="#">menu </a>
<ul><li><a href="#">Rapport</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Vidéos</a></li>
<li><a href="#">Audio</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=".//phpbb" target="haut">Forum</a>
<ul>
<li><a href="#">telle categorie</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href=".//contact.html" target="haut">Contacter</a></li>
<li><a href="#">Contacter un membre</a></li>
<li><a href="#">machin bidule</a></li>
</ul>
</li>
</ul>
</div>
</font>
</body>
</html>
Sous firefox, le resultat est celui auquel je m'attendais, mais sous ie, la mise en page est verticale et non horizontale, et le jeu de couleur ne fonctionne pas.
Merci pour vos propositions.
Je cherche a faire un menu déroulant qui marcherait quelque soit le navigateur, avec des bouts de codes trouvés sur le net, je pensais que le css résoudrait mon problème, mais ce n'est pas le cas.
Sauriez vous ou se situe mon erreur?
le menu marche bien sous firefox, mais pas sous internet explorer.
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css"
<!--
#menu, #menu ul { padding : 0;
margin : 0;
list-style : none;
line-height : 22px;
text-align : center;}
#menu { font-weight : bold;
font-family : calibri;
font-size : 18px;}
#menu a{display : block;
padding : 0;
background : #FF7700;
color : #FFFFFF;
text-decoration : none;
width : 165px; }
#menu li {float : left;
border-right : 1px solid #fff;}
html>body #menu li{border-right: 1px solid transparent ;}
#menu li ul{position: absolute;
width: 165px;
left: -999em;}
#menu li ul li border-top : 1px solid #fff;}
html>body #menu li ul li { border-top : 1px solid transparent;}
#menu li ul ul{ margin : -22px 0 0 165px ;
border-left : 1px solid #fffFFF ; }
html>body #menu li ul ul{border-left : 1px solid}
#menu li:hover ul ul, #menu li.sfhover ul ul {left: -999em; background: #FFFFFF; }
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {left: auto;
min-height: 0;}
#menu a:hover {color: #ff7700;
background: #FFFFFF; }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banniere</title>
<body >
<a href=".//accueil.html" target="haut"<img style="position:fixe;left:0;top:0;width:30%;height:10%;
"src="../Images/logo.jpg" alt="" BORDER="0"/>
<div style="position:absolute;right:0%;top:13%;width:70%;height:100%;">
<ul id="menu">
<li><a href=".//accueil.html" target="haut">Asso</a>
<ul>
<li><a href=".//motpresident.html" target="haut">blabla</a></li>
</ul>
</li>
<li><a href=".//ucp.php?mode=login" target="haut">Membres</a>
<ul>
<li><a href="../php/ucp.php?mode=login" target="haut">Acces membres</a>
<li><a href="#">Sousmenu2</a>
<li><a href="#">Sousmenu3</a>
</ul>
<li><a href="#">menu</a>
<ul>
<li><a href="#">sousmenu1</a>
<ul><li><a href="#">cat1t</a></li>
<li><a href="#">cat2</a></li>
<li><a href="#">Vidéos</a></li>
<li><a href="#">cat4</a></li>
</ul>
</li>
<li><a href="#">menu encore</a>
<ul><li><a href="#">cat1</a></li>
<li><a href="#">cat2</a></li>
<li><a href="#">cat3</a></li>
<li><a href="#">cat4</a></li>
</ul>
</li>
<li><a href="#">menu </a>
<ul><li><a href="#">Rapport</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Vidéos</a></li>
<li><a href="#">Audio</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=".//phpbb" target="haut">Forum</a>
<ul>
<li><a href="#">telle categorie</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc</a></li>
<li><a href="#">etc</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href=".//contact.html" target="haut">Contacter</a></li>
<li><a href="#">Contacter un membre</a></li>
<li><a href="#">machin bidule</a></li>
</ul>
</li>
</ul>
</div>
</font>
</body>
</html>
Sous firefox, le resultat est celui auquel je m'attendais, mais sous ie, la mise en page est verticale et non horizontale, et le jeu de couleur ne fonctionne pas.
Merci pour vos propositions.
A voir également:
- Menu deroulant ok sous firefox, pas sous ie
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Downloadhelper firefox - Télécharger - Outils pour navigateurs
- Exporter favoris firefox - Guide
3 réponses
regarde ce lien pour voir si ça marche sur IE http://jeanmichel.gens.free.fr/menu2.php
je ne peux pas je suis sur linux , si ça te convient tu peux le prendre js voir code source
je ne peux pas je suis sur linux , si ça te convient tu peux le prendre js voir code source
