jquery菜单在悬停时效果很好，但子菜单在点击时消失

Question

我有一个漂亮的两行菜单，其中第二行出现在第一行的悬停上。然而，当我点击它时，第二行消失;除非我将鼠标放在第一行的父项上。我希望父母和兄弟姐妹保持突出显示，直到点击另一个项目。我已经搜遍了很多问题，但找不到我做错了什么。

我的CSS：

#main-nav { 
    margin: 0px 0px 0px 0px; 
    text-align: left; 
    height: 25px; 
    background:url('images/buttonback.gif') repeat-x; 
    padding-top: 0px; 
    padding-left: 43px; 
} 

#main-nav li { 
    display: inline; 
    list-style: none; 
} 
#main-nav li a { 
    width: 109px; 
    height: 15px; 
    margin-right: 5px; 
    font-size: 12px; 
    text-decoration: none; 
    color: #f2f2f2; 
    font-family: Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    padding: 4px; 
    outline: 0; 
    position: relative; 
    top: 5px; 
} 
#main-nav li a:hover, #main-nav li a.active { 
    background: #00539f; 
} 

#menu2 { 
width: 800px; 
height: 25px; 
padding-left: 0px; 
background:url('images/brownback.gif') repeat-x; 
} 

.sub-links { 
    display: none; 
    position: absolute; 
    width: 800px; 
    top: 154px; 
    text-align: left; 
} 

#main-nav li .sub-links li a:hover { 
    background: #ca9e59; 
} 

jQuery的脚本：

<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
     $('#main-nav li a.main-link').hover(function(){ 
     $("#main-nav li a.main-link").removeClass("active");               $(this).addClass("active"); 
     $(".sub-links").hide();         
     $(this).siblings(".sub-links").fadeIn(); 
    });  
$(function(){ 
    $(".sub-links a").click(function(){ 
     $(".sub-links").hide(); 
     $(this).fadeIn(); 
    }); 
    }); 
}); 
</script> 

和HTML：

<ul id="main-nav"> 
     <li><a class="main-link" href="index.htm">Home</a> 
     </li> 
     <li><a class="main-link" href="about.htm">About Us</a> 
      <ul class="sub-links"> 
      <li><a href="mission.htm" title="Mission-Vision-Values">Mission Vision Values</a> </li> 
      <li><a href="board.htm" title="Board">Board</a> </li> 
      <li><a href="stratplan.htm" title="StratPlan">Strategic Plan</a> </li> 
      <li><a href="staff.htm" title="Staff">Staff</a> </li> 
      <li><a href="customervalue.htm" title="CustomerValuePropostion">Customer Value Proposition</a> </li> 

      </ul> 
     </li> 
    <li><a class="main-link" href="facilities.htm">Facilities</a> 
     </li>  
     <li><a class="main-link" href="http://www.fhhr.ca/services.htm">Services</a> 

     </li> 
     <li><a class="main-link" href="http://www.fhhr.ca/careers.html">Careers</a> 

     </li> 
     <li><a class="main-link" >News & Info</a> 
      <ul class="sub-links"> 
       <li><a href="annualreport.htm" title="AnnualReport">Annual Report</a></li> 
       <li><a href="regionnews.htm" title="RegionNews">Region News</a></li> 
       <li><a href="media.htm" title="MediaRelease">Media Releases</a></li> 
       <li><a href="newsletter.htm" title="Newsletter">Newsletter</a></li> 

      </ul> 
     </li> 
     <li><a class="main-link" href="contact.htm">Contact Us</a> 

     </li> 

     </ul> 
    <div id="menu2"></div> 

Answer 1

第二个R流消失，因为你把它隐藏在点击：如果你不想隐藏它只是删除这一部分：

$(function(){ 
    $(".sub-links a").click(function(){ 
     $(".sub-links").hide(); 
     $(this).fadeIn(); 
    }); 
    }); 
});