WRInaute discret
Bonjour à tous et merci de votre aide.
Je n'arrive tout simplement pas à obtenir le résultat désiré alors que la solution me semble pourtant simple!
J'ai un menu avec un sous menu qui apparait lors du survol de certains boutons.
Je désire que le bouton associé au sous menu garde son état "survolé" lorsque je suis sur le sous menu.
Dois-je ajouter une "class" au bouton pour conserver son état survolé?
Voici le lien pour le visuel http://dubuismedia2.com/ulp/efface.php
code de mon menu
code du CSS.
Je n'arrive tout simplement pas à obtenir le résultat désiré alors que la solution me semble pourtant simple!
J'ai un menu avec un sous menu qui apparait lors du survol de certains boutons.
Je désire que le bouton associé au sous menu garde son état "survolé" lorsque je suis sur le sous menu.
Dois-je ajouter une "class" au bouton pour conserver son état survolé?
Voici le lien pour le visuel http://dubuismedia2.com/ulp/efface.php
code de mon menu
Code:
<nav id="nav">
<ul>
<li id="btaccueil"><a href="/ulp/">Accueil</a></li>
<li id="btforfaits"><a href="#"><span>Forfaits</span></a>
<div class="menu">
<dl class="sub_nav">
<dt><a href="#">Forfait découverte Autogire</a></dt>
<dt><a href="#">Forfait découverte ULM</a></dt>
<dt><a href="#">Pilote d'un jour Autogire</a></dt>
<dt><a href="#">Pilote d'un jour ULM</a></dt>
<dd><br />
</dd>
</dl>
</div>
</li>
<li id="btpilote"><a href="#"><span>Devenir Pilote</span></a>
<div class="menu">
<dl class="sub_nav">
<dt><a href="pilote-autogire">Devenir Pilote d'Autogire</a></dt>
<dt><a href="pilote-ultra-leger-motorise.php">Devenir Pilote d'ULM</a></dt>
<dd><br />
</dd>
</dl>
</div>
</li>
<li id="btapropos"><a href="a-propos.php" rel="author">A Propos</a></li>
<li id="btphotos"><a href="photos.php">Photos</a></li>
<li id="btautogire"><a href="http://www.dtagyrocanada.ca/">Autogire</a></li>
<li id="btcontact"><a href="contact.php">Contacts</a></li>
</ul>
</nav>
Code:
/* --- menu du haut --- */
#nav {height:37px;}
#nav ul { width:760px; margin:41px 0 0 200px; padding:0; }
#nav li { float:left; list-style-type:none; margin:0; padding:0;}
/* --- boutons menu du haut --- */
#btaccueil a, #btforfaits a span, #btpilote a span, #btapropos a, #btphotos a, #btautogire a, #btcontact a { display:block; text-indent:-9999em; }
#btaccueil a { width:50px; height:37px; background:url(../design/menu.png) no-repeat 0 0; }
#btaccueil a:hover { background:url(../design/menu.png) no-repeat 0 -37px; }
#btforfaits a span { width:101px; height:37px; background:url(../design/menu.png) no-repeat -50px 0; }
#btforfaits a:hover span { background:url(../design/menu.png) no-repeat -50px -37px; }
#btpilote a span { width:166px; height:37px; background:url(../design/menu.png) no-repeat -151px 0; }
#btpilote a:hover span { background:url(../design/menu.png) no-repeat -151px -37px; }
#btapropos a { width:111px; height:37px; background:url(../design/menu.png) no-repeat -317px 0; }
#btapropos a:hover { background:url(../design/menu.png) no-repeat -317px -37px; }
#btphotos a { width:94px; height:37px; background:url(../design/menu.png) no-repeat -428px 0; }
#btphotos a:hover { background:url(../design/menu.png) no-repeat -428px -37px; }
#btautogire a { width:118px; height:37px; background:url(../design/menu.png) no-repeat -522px 0; }
#btautogire a:hover { background:url(../design/menu.png) no-repeat -522px -37px; }
#btcontact a { width:120px; height:37px; background:url(../design/menu.png) no-repeat -640px 0; }
#btcontact a:hover { background:url(../design/menu.png) no-repeat -640px -37px;}
/* --- sous menu --- */
.menu { position:absolute; top:78px; width:254px; background:url(../design/smenu.png) no-repeat bottom; padding:1em 0;margin-left:-6px;z-index:9999; }
.menu .forfaitsover:hover{background:url(../design/menu.png) no-repeat -50px -37px; }
li .menu { display:none;}
li:hover .menu { display:block; }
li.over .menu { display:block; }
.sub_nav {margin-left:1em; padding:0; float:left; }
.sub_nav dt { margin:0; padding:0; text-align:left; }
.sub_nav dt a { text-decoration:none; }