jqueryメニューはホバリングでうまくいきますが、クリックするとサブメニューが消えます

Question

2行目のメニューがあり、最初の行に2行目が表示されます。しかし、2番目の行は、クリックすると消えます。私が最初の行の親の上にマウスを置かない限り。別のアイテムがクリックされるまで、親と兄弟は強調表示されたままにしておきたい。私は多くの質問を捜し求めましたが、私が間違っていることを見つけることはできません。

マイ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

第2Rあなただけのこの部分を削除し、それを隠すためにしたくない場合は：あなたはクリックでそれを隠すため、OWは消え

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