comment faire pour que le sous-menu css reste sur place quand la sous-page a été sélectionnée

Question

J'ai un menu horizontal css avec un affichage menu/sous-menu qui fonctionne sur le vol stationnaire, mais je voudrais aussi que les options du sous-menu restent actives quand j'ai sélectionné page. Le code ci-dessous montre le sous-menu sur le vol stationnaire, mais disparaît à la sortie de la souris. J'ai de la difficulté à trouver comment faire fonctionner mon code pour que les éléments du sous-menu restent en place? Comment puis-je faire ceci?

Merci pour votre aide.

Voici le HTML:

<ul id="menu_nav"> 
    <li> 
     <a href="#" class="button">Home</a> 
     <span> 
      <a href="#">Home Link1</a> 
      <a href="#">Home Link2</a> 
      <a href="#">Home Link3</a> 
     </span> 
    </li> 
    <li> 
     <a href="#" class="button">About Us</a> 
     <span> 
      <a href="#">About Link1</a> 
      <a href="#">About Link2</a> 
      <a href="#">About Link3</a> 
     </span> 
    </li> 
</ul> 

Voici le CSS

ul#menu_nav 
{ 
    position:relative; 
    float:left; 
    width:790px; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    background-color:#000099; 
} 
ul#menu_nav li {float: left; 
    margin: 0; padding: 0; 
    border-right: 1px solid #555;} 

ul#menu_nav li a.button 
{ 
    float:left; 
    text-decoration:none; 
    color:white; 
    background-color:#000099; 
    padding:0.2em 0.6em; 
    border-right:1px solid #CCCCCC; 

    font-family: Tahoma; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: bold; 
    position: relative; 
    height: 21px; 
    line-height:1.85em; 
} 
ul#menu_nav li a:hover { 
    background-color:#F7F7F7; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 
} 

ul#menu_nav li span{ 
    float: left; 
    padding: 15px 0; 
    position: absolute; 
    left: 0; top:25px; 
    display: none; /*--Hide by default--*/ 
    width: 790px; 
    background: #F7F7F7; 
    color: #fff; 
} 
ul#menu_nav li:hover span { display: block; } /*--Show subnav on hover--*/ 
ul#menu_nav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ 
ul#menu_nav li span a:hover {text-decoration: underline;} 

Heres le jquery:

$("ul#menu_nav li").hover(function() { //Hover over event on list item 
     $(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item 
     $(this).find("span").show(); //Show the subnav 
    } , function() { //on hover out... 
     $(this).css({ 'background' : 'none'}); //Ditch the background 
     $(this).find("span").hide(); //Hide the subnav 
    }); 

Answer 1

Bryan, merci. J'ai fondamentalement fait quelque chose à ce que vous avez suggéré. J'avais déjà une classe appelée ".selected", qui était utilisée pour afficher l'onglet sélectionné pour le menu. dans l'événement "hover" j'ai mis une instruction if à vérifier pour voir si la classe avait "selected" dedans, si c'est le cas, j'ai simplement affiché la balise span masquée. "$ (this) .next(). show();" est la ligne qui a fait ce dont j'avais besoin sur l'événement "clic" pour que le sous-menu reste actif. J'espère que ça aide quelqu'un d'autre.

Voir le code:

$("ul#menu_nav li").hover(function() { //Hover over event on list item 
      $(this).css({ 'background' : '#1376c9'}); //Add background color and image on hovered list item 
      $(this).find("span").show(); //Show the subnav 
     } , function() { //on hover out... 
      $(this).css({ 'background' : 'none'}); //Ditch the background 

      if($(this).children("a").is('.selected')) 
      { 
       $(this).children("span").show(); 
      } 
      else 
      { 
       $(this).find("span").hide(); //Hide the subnav 
      } 
     }); 

     $(".menu_buttons li>a").click(function(){ 
      $(this).addClass('selected').removeClass('button') 
        .parents().siblings().children("a").removeClass('selected').addClass('button') 
        .parents().siblings().children("span").hide() 
      $(this).next().show(); 
     }); 

Answer 2

Je ne suis pas sûr de ce que vous essayez de faire, mais je suis sûr que quoi que ce soit peut être réalisé en ajoutant une classe à tout ce que vous essayez d'obtenir pour rester en place et ne pas modifier son C SS ou le cacher. Quelque chose comme

$("ul#menu_nav li").hover(function() { //Hover over event on list item 
    $(this).css({ 'background' : '#1376c9'}); 
    $(this).find("span").addClass('keep').show(); //Show the subnav 
} , function() { //on hover out... 
    $(this).css({ 'background' : 'none'}); //Ditch the background 
    $(this).find("span:not(keep)").hide(); //Hide the subnav 
});