Bonjour,
J'aimerais créer un menu propre et pratique. Chaque intitulé peut avoir un (et un seul) sous-menu. De plus, pour une raison d'ergonomie, j'aimerais que les sous-menus s'affichent horizontalement. J'ai donc essayé de le faire sous la forme suivante :
avec le CSS suivant :
Pas de problème, le menu s'affiche exactement comme je le souhaite :
http://img83.imageshack.us/img83/6641/menu14fc.jpg
Mais je désire en réalité afficher le sous-menu que lorsque la souris passe sur le menu correspondant (logique !). Je modifie donc une ligne du CSS ci-dessus:
display: inline;
devient
display: none;
et je rajoute un évènement javascript sur la balise <li> correspondant au premier menu afin de changer le style "display" du <ul> à "inline". Pas de problème sous Firefox, il me raffiche exactement la même chose que l'image ci-dessus. Sous IE par contre, j'obtient :
http://img152.imageshack.us/img152/7968/menu23kz.jpg
J'ai raté quelque chose !?!
Bug de IE ?
J'ai essayé avec des divs à la place de listes, en utilisant le style visibility au lieu de display, mais rien y fait. Le problème viendrait de l'utilisation des "float: left", mais si je les retire j'obtient alors :
http://img85.imageshack.us/img85/9910/menu39et.jpg
Et là, d'autres problèmes apparaissent : impossible de "décoler" les menus du haut du document (margin-top reste sans effet) et la hauteur que je donne dans le CSS n'est pas respectée.
J'ai regardé l'exemple de menu horizontal proposé par Alsacreations, mais les mêmes problèmes se posent : par exemple, si je désire donner des hauteurs précises, elles ne sont pas respectées.
Si quelqu'un pouvait m'aider, ce serait très sympa !
Merci d'avance
Modifié par JulienC (14 Apr 2006 - 14:53)
J'aimerais créer un menu propre et pratique. Chaque intitulé peut avoir un (et un seul) sous-menu. De plus, pour une raison d'ergonomie, j'aimerais que les sous-menus s'affichent horizontalement. J'ai donc essayé de le faire sous la forme suivante :
<ul class="menu">
<li>Menu1
<ul>
<li>SousMenu1</li>
<li>SousMenu2</li>
</ul>
</li>
<li>Menu2</li>
</ul>avec le CSS suivant :
body {
margin: 0px;
font-family: verdana;
font-size: 14px;
}
ul.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
height: 30px;
}
ul.menu li {
float: left;
background-color: #eeeeee;
height: 18px;
padding: 6px 10px;
text-align: center;
}
ul.menu li ul {
list-style-type: none;
position: absolute;
top: 30px;
left: 0px;
margin: 0px;
padding: 0px;
height: 30px;
display: inline;
}
ul.menu li ul li {
float: left;
background-color: #ffeeee;
height: 18px;
padding: 6px 10px;
text-align: center;
}Pas de problème, le menu s'affiche exactement comme je le souhaite :
http://img83.imageshack.us/img83/6641/menu14fc.jpg
Mais je désire en réalité afficher le sous-menu que lorsque la souris passe sur le menu correspondant (logique !). Je modifie donc une ligne du CSS ci-dessus:
display: inline;
devient
display: none;
et je rajoute un évènement javascript sur la balise <li> correspondant au premier menu afin de changer le style "display" du <ul> à "inline". Pas de problème sous Firefox, il me raffiche exactement la même chose que l'image ci-dessus. Sous IE par contre, j'obtient :
http://img152.imageshack.us/img152/7968/menu23kz.jpg
J'ai raté quelque chose !?!
Bug de IE ?
J'ai essayé avec des divs à la place de listes, en utilisant le style visibility au lieu de display, mais rien y fait. Le problème viendrait de l'utilisation des "float: left", mais si je les retire j'obtient alors :
http://img85.imageshack.us/img85/9910/menu39et.jpg
Et là, d'autres problèmes apparaissent : impossible de "décoler" les menus du haut du document (margin-top reste sans effet) et la hauteur que je donne dans le CSS n'est pas respectée.
J'ai regardé l'exemple de menu horizontal proposé par Alsacreations, mais les mêmes problèmes se posent : par exemple, si je désire donner des hauteurs précises, elles ne sont pas respectées.
Si quelqu'un pouvait m'aider, ce serait très sympa !
Merci d'avance
Modifié par JulienC (14 Apr 2006 - 14:53)
