如何使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 
});