如何使css子菜單保持放在子頁面被選中時

Question

我有一個css水平菜單，其菜單/子菜單顯示工作在懸停狀態，但我也想讓子菜單選項保持放置，當我選擇了頁。下面的代碼顯示了懸停的子菜單，但是鼠標消失了。我有一些困難，想出如何讓我的代碼工作，以保持子菜單項保持放？我怎樣才能做到這一點？

感謝您的幫助。

這裏的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> 

這裏的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;} 

繼承人的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

布賴恩，謝謝。我基本上對你的建議做了些什麼。我已經有一個名爲「.selected」的類，它被用來顯示菜單的選定標籤。在「懸停」事件中，我放了一條if語句來檢查該類是否「已選中」，如果是這樣，我只是顯示了隱藏的span標籤。 「$（本）。接下來（）顯示（）;」是做了我所需要的「點擊」事件來使子菜單保持放置的行。希望它能幫助其他人。

看到代碼：

$("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

我不太確定你想要做什麼，但我相信，無論是通過添加一個類到任何你試圖保持放置而不修改它的C SS或隱藏它。類似於

$("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 
});