Le code est le même que dans le tuto, mais voici le mien :
HTML :
<div id="menu">
<ul class="navigation">
<li><a href="index.html">ACCEUIL</a></li>
<li class="toggleSubMenu"><span>LES BASES</span>
<ul class="subMenu">
<li><a href="interets-et-avantages.html">Inérêts et avantages</a></li>
<li><a href="differents-types-de-systemes-d-arrosage-automatique.html">Différents types de systèmes d'arrosage automatique</a></li>
<li><a href="definitions-techniques.html">Définitions techniques</a></li>
<li><a href="etude-prealable.html">Etude préalable</a></li>
</ul><!-- .subMenu -->
</li><!-- .toggleSubMenu -->
<li class="toggleSubMenu"><span>MISE EN OEUVRE</span>
<ul class="subMenu">
<li><a href="les-tranchees.html">Les tranchées</a></li>
<li><a href="les-tubes.html">Les tubes</a></li>
<li><a href="la-clarinette-et-le-regard.html">La clarinette et le regard</a></li>
<li><a href="les-arroseurs.html">Les arroseurs</a></li>
<li><a href="le-goutte-a-goutte.html">Le goutte-à-goutte</a></li>
<li><a href="le-programmateur.html">Le programmateur</a></li>
</ul><!-- .subMenu -->
</li><!-- .toggleSubMenu -->
<li class="toggleSubMenu"><span>LES MARQUES</span>
<ul class="subMenu">
<li><a href="rain-bird.html">Rain Bird</a></li>
<li><a href="hunter.html">Hunter</a></li>
<li><a href="toro.html">Toro</a></li>
<li><a href="claber.html">Claber</a></li>
<li><a href="gardena.html">Gardena</a></li>
</ul><!-- .subMenu -->
</li><!-- .toggleSubMenu -->
<li class="toggleSubMenu"><span>MATERIEL</span>
<ul class="subMenu">
<li><a href="programmateurs.html">Programmateurs</a></li>
<li><a href="regards.html">Regards</a></li>
<li><a href="reseaux-enterres.html">Réseaux enterrés</a></li>
<li><a href="arroseurs.html">Arroseurs</a></li>
<li><a href="goutte-a-goutte.html">Goutte-à-goutte</a></li>
</ul><!-- .subMenu -->
</li><!-- .toggleSubMernu -->
</ul><!-- /navigation -->
</div><!-- #menu -->
CSS :
/* --- MENU ---*/
.navigation {
margin: 0;
padding: 0;
list-style: none;
background: #000;
color: #fff;
width: 200px;
font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
display: block;
padding: 4px 10px;
color: #fff;
text-decoration: none;
background: #000 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
background-image: url(menu-item-enroule.png);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
text-decoration: underline;
}
.navigation .subMenu {
font-size: .8em;
background: #ccc url(subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
}
.navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}
Modifié par Zephyr06 (12 Feb 2016 - 14:47)
