Bonjour,
en voulant m'aider d'un livre traitant sur CSS, je voulais créer un menu de ce type :
<div id=nav> <ul class="level1">
<li class="submenu"><a href="#"><img src="images/boutons/general.gif" width="122" height="37"></a></li>
<ul class="level2">
<li>Accueil</li>
<li>Questionnaire</li>
<li>Mail</li>
</ul></li>
<li class="submenu"><a href="#"><img src="images/boutons/electromenager.gif" width="122" height="37"></a>
<ul class="level2">
<li>Cafetière</li>
<li>Crêpière</li>
<li>Fer à repasser</li>
<li>Machine à pain</li>
</ul></li>
<li class="submenu"><a href="#"><img src="images/boutons/electronique.gif" width="122" height="37"></a>
<ul class="level2">
<li>Cadre numérique</li>
<li>Cadre réveil</li>
<li>Montre</li>
<li>Radio-réveil</li>
</ul>
</li>
<li class="submenu"><a href="#"><img src="images/boutons/vetements.gif" width="122" height="37"></a>
<ul class="level2">
<li>Jogging</li>
<li>Manteau</li>
</ul>
</li>
<li class="submenu"><a href="#"><img src="images/boutons/autres.gif" width="122" height="37"></a>
<ul class="level2">
<li>Fontaine</li>
<li>Parapluie</li>
<li>Sac à dos</li>
</ul>
</li>
</ul></div>
et en CSS:
/* CSS Document */
body {background:#EEE; color:#000; behavior:url(css/csshover.htc);}
h1 {color:#aaa; border-bottom:1px solid; margin-bottom:0;}
#main {color:#CCC; margin-left: 7em; padding:2em 0 1px 5%; border-left: 1px solid;}
div#nav {float:left; margin:-1px 0 0 7em; background:#fff; border: 1px solid #aaa;}
div#nav ul {margin:0; padding:0; background:white; border: 1px solid #ccc; border-width:0 1px;}
div#nav li {position:relative; list-style:none; margin:0; float:left; width:7em; line-height:1em}
div#nav li:hover {background:#ebb}
div#nav li.submenu {background:url(dropmenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover{background-color:#edd;}
div#nav li a {display:block; padding: 0.25em 0.025em 0.5em; text-decoration:none; width:6.5em;}
div#nav>ul a {width:auto;}
div#nav ul ul {position:absolute; width:7em; display:none;}
div#nav ul ul li {border-bottom:1px solid #ccc;}
div#navli.submenu li.submenu {background-image:url(submenu.gif);}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
div#nav ul.level2 {top:1.5em; left:-1px;}
div#nav ul.level3 {top: -1px; left:7em; border-top:1px solid #ccc;}
Si ça fonctionne bien sous IE, sous Firefox le premier menu ne se déroule pas (Général).
Est-ce que quelqu'un peut m'aider?
Merci
