Bonjour,
Dans le cadre de la mise en place (bénévole) d'un site pour une association, je cherche à réaliser un menu horizontal à déroulement vertical à trois niveaux.
Ma question porte sur l'apparition du dernier niveau des catégories : il reste absent lors du survol. Comment le faire apparaître ? Je dois avouer que je suis un peu perdu dans les propriétés css.
Voici le code html :
J'ai appliqué des propriétés css pour la mise en forme.
Voici le code correspondant :
sfhover correspondant à un javascript que j'ai tenté d'écrire pour la compabitilité. Même si ma question porte sur le css, pour info, le voici:
Tout ce passe correctement...pour le premier déroulement.. Pas pour le dernier !
Je vous serai donc reconnaissant pour votre aide et vos critiques éventuelles.
Merci
[/i][/i]
Dans le cadre de la mise en place (bénévole) d'un site pour une association, je cherche à réaliser un menu horizontal à déroulement vertical à trois niveaux.
Ma question porte sur l'apparition du dernier niveau des catégories : il reste absent lors du survol. Comment le faire apparaître ? Je dois avouer que je suis un peu perdu dans les propriétés css.
Voici le code html :
<div>
<ul id="nav">
<li><a href="#">Accueil</a>
</li>
<li><a href="#">L'Association</a>
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Historique</a></li>
<li><a href="#">Assemblées générales</a></li>
<li><a href="#">Bulletins mensuels</a></li>
<li><a href="#">Hommages</a></li>
<li><a href="#">Adhésion</a></li>
<li><a href="#">Annuaire</a></li>
<ul>
<li><a href="#">Anciens membres</a><li>
<li><a href="#">Membres depuis 2000</a></li>
<li><a href="#">Membres depuis 2008</a></li>
</ul>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">Activités</a>
<ul>
<li><a href="#">Opération calendrier</a></li>
<li><a href="#">En construction</a></li>
</ul>
</li>
<li><a href="#">Bulletins</a>
<ul>
<li><a href="#">Anciens bulletins de l'association</a></li>
<li><a href="#">Le mot du président</a></li>
<li><a href="#">Trésorerie</a></li>
<li><a href="#">Nos adhérents agissent</a></li>
</ul>
</li>
<li><a href="#">Memento</a>
<ul>
<li><a href="#">Infos Carrières</a></li>
<li><a href="#">Infos</a></li>
<li><a href="#">Offres</a></li>
<ul>
<li><a href="#">Achats / ventes de livres</a></li>
<li><a href="#">Soutiens scolaires</a></li>
</ul>
<li><a href="#">Liens utiles</a></li>
</ul>
</li>
<li><a href="#">Photos des adhérents</a>
</li>
</ul>
</div>
J'ai appliqué des propriétés css pour la mise en forme.
Voici le code correspondant :
#nav, #nav ul {padding: 0; margin: 0; list-style:none; color: #002060; text-align: center; line-height: 1.5; }
#nav a {display: block; width: 133px; line-height: 2.3; background-color: #ddd9c3; margin: 0; padding: 0; font-size: 12px; font-weight: bold; text-decoration: none; font-family: georgia;}
#nav li {float: left; width: 133px; margin: 0; padding: 0; border: 2px solid #696969; }
#nav li ul {position: absolute; width: 133px; left: -999em; border: 0px solid #696969; }
#nav li ul ul {margin: 0 0 0 8.45em; }
#nav a:hover {left: auto; background-color: #ddd9c3;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;}
#nav li:hover ul ul, #nav li.sfhover ul ul {left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {left: auto;}
sfhover correspondant à un javascript que j'ai tenté d'écrire pour la compabitilité. Même si ma question porte sur le css, pour info, le voici:
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").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>
Tout ce passe correctement...pour le premier déroulement.. Pas pour le dernier !
Je vous serai donc reconnaissant pour votre aide et vos critiques éventuelles.
Merci
[/i][/i]
) comme Benjamin:
simple confirmation ...