Question sur un ménu déroulant

Bonjour,

j'ai un menu déroulant qui marche mais j'aimerais que lorsqu'on sélectionne une option du menu qui permet d'afficher le menu déroulant, l'image qui apparait grâce au code css a:hover, reste afficher.

Comme sur le site de la fnac en gros.

Faut il du javascript ?

Voic le code:

<div id="sousMenuConteneur">
    <ul id="sousNav">
      <li><a href="#" title="">mammifères</a>
     <ul class="sousNavDeroulant">  
      <li><a href="#">castor</a></li>
   <li><a href="#">lapin</a></li>
   <li><a href="#">chameau</a></li>  
      <li><a href="#">chien</a></li>
   <li><a href="#">chat</a></li>
   <li><a href="#">lion</a></li>  
  </ul>
      </li>
      <li><a href="#" title="">oiseaux</a></li>
      <li><a href="#" title="">insectes</a></li>
      <
    </ul>
  </div>

/* SOUS MENU */

#sousMenu {
    margin: 0;
    padding: 0;
    height: 25px;
    background: #e5ff08 none;
    border-bottom: 1px solid #444;
}

#sousMenuConteneur {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    background: transparent none;
}

div#sousMenuConteneur ul#sousNav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 960px;
    height: 25px;
    background-image: none;
    background-color: transparent;
}

div#sousMenuConteneur ul#sousNav li {
    float: left;
    width: 80px;
    color: #444;
}

div#sousMenuConteneur ul#sousNav li a {
    margin: 0;
    height: 20px;
    padding: 5px 0 0 0;
    display: block;
    color: #000;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    background: transparent none;
}

div#sousMenuConteneur ul#sousNav li a:hover, ul#sousNav li a:focus, ul#sousNav li a:active {
    margin: 0;
    height: 20px;
    padding: 5px 0 0 0;
    color: #fff;
    display: block;
    text-transform: capitalize;
    font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    background: transparent url(../images/header/sousMenuSelect/sousMenuTest.png) no-repeat;
}

/* SOUS MENU DEROULANT*/
div#sousMenuConteneur ul#sousNav ul.sousNavDeroulant {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}

div#sousMenuConteneur ul#sousNav li:hover > ul.sousNavDeroulant {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    width: 960px;
    color: #000;
    height: 80px;
    position: relative;
    background-image: none;
    background-color: black;
    overflow: auto;
}

div#sousMenuConteneur ul#sousNav .sousNavDeroulant li {
    margin: 0;
    padding: 0;
    border: 0;
    width: 80px;
    float: left;
    opacity: 1;
}

div#sousMenuConteneur ul#sousNav .sousNavDeroulant li a {
    margin: 0;
    padding: 0;
    border: 0;
    background-image: none;
    background-color: #000;
    color: #fff;
    width: 80px;
    text-align: left;
    font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-decoration: none;
    opacity: 1;
}

div#sousMenuConteneur ul#sousNav .sousNavDeroulant li a:hover, .sousNavDeroulant li a:focus , .sousNavDeroulant li a:active {
    margin: 0;
    padding: 0;
    border: 0;
    color: #fff;
    width: 80px;
    background-image: none;
    background-color: #000;
    font: 11px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-decoration: none;
    text-align: left;
    opacity: 0.5;
}

merci
Modifié par zbibounette (11 Aug 2008 - 15:46)

Salut,

a écrit :
j'ai un menu déroulant qui marche mais j'aimerais que lorsqu'on sélectionne une option du menu qui permet d'afficher le menu déroulant, l'image qui apparait grâce au code css a:hover, reste afficher.

Pas compris . Pourtant je suis allé voir sur le site de la Fnac. Tu parles de l'onglet qui reste blanc quand on sélectionne une zone du site?

a écrit :
Faut il du javascript ?

Pour un menu déroulant, toujours

quand tu vas sur http://www.fnac.com/ tu as par exemple dans le menu, un rayon "livre"

quand tu passes dessus il y a une image de couleur blanche qui reste affichée quand tu tu te ballades dans le menu déroulant (bd manga, roman, etc...).

Aurais tu un exemple qui expliquerais comment laisser l'image affichée ?

Merci

Ça doit être géré par le script qui anime ton menu déroulant, difficile de te donner une réponse applicable sans connaître ce script.

Le plus simple serait d'ajouter une classe à l'item du menu, et de ne la retirer que lorsque la souris quitte le sous-menu (très facile à faire si tu utilises une librairie comme jQuery ou Mootools ...).

je n'y connais rien en javascript

Je suis pas spécialement calé non plus. Et personne ne pourra rien faire pour toi tant qu'on ne saura pas comment le menu fonctionne.

Autrement dit, sans page d'exemple point de salut

merci quand même

zbibounette a écrit :


merci quand même

Heu, il reste quand même l'option "tenez, ma page d'exemple est ici: http://www.example.org" ?!