Garder l'État d'un bouton au survol du sous menu

[lululelutin]

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

<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 du CSS.

/* --- 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; }

 

[p0k3]

Il faut faire quelque chose comme :

  .menu li:over > .submenu { display:block; }

 

[lululelutin]

Merci pour la piste mais ça ne fonctionne pas
C'est lorsque l'on place le curseur sur le sous menu que le bouton doit conserver son état "survolé"

 

[p0k3]

Voici la logique à tenir :

 <style>
.menu li ul.sousmenu { display:none}
.menu li:hover > ul.sousmenu {display:block}
</style>

<ul class="menu">
  <li>
    <a href="#">Lien1</a>
    <ul class="sousmenu">
      <li><a href="#">Sous lien 1</a></li>
      <li><a href="#">Sous lien 2</a></li>
      <li><a href="#">Sous lien 3</a></li>
    </ul
  </li>
  <li></li>
</ul>