jQuery子菜單不會顯示

Question

使用以下代碼我可以顯示ABOUT和FAQ子菜單，但鼠標懸停時不會顯示任何內容，我不知道爲什麼。請幫忙！如果有更多的代碼，我應該讓我知道！在此先感謝您的幫助:)

的HTML：

<ul class="navigation"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a> 
       <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Location</a></li> 
        <li><a href="#">Gallery Tour</a></li> 
        <li><a href="#">Testimonials</a></li> 

       </ul> 
      </li> 
      <li><a href="#">Accomodations</a></li> 
       <ul> 
        <li><a href="#">Event Space</a></li> 
        <li><a href="#">Guest Rooms</a></li> 
        <li><a href="#">Kitchen and Catering Facility</a></li> 
       </ul>   
      </li> 
      <li><a href="#">Activities</a></li> 
       <ul> 
        <li><a href="#">The Katy Trail</a></li> 
        <li><a href="#">Augusta</a></li> 
        <li><a href="#">St. Louis Attractions</a></li> 
       </ul> 
      <li><a href="#">Reservations</a></li> 
       <ul> 
        <li><a href="#">Rates</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Request Info</a></li> 
        <li><a href="#">Event Agreement Form</a></li> 
       </ul> 
        <li><a href="#">FAQ</a> 
       <ul> 
        <li><a href="#">Additional Info</a></li> 
        <li><a href="#">Catering</a></li> 
       </ul> 
</ul> 

的CSS：

.navigation {margin:0; padding:0;list-style:none; } 


    .navigation li { 
     float:left;   
     width:120px; 
     position:relative; 
    } 


    .navigation li a { 
     background:#262626; 
     color:#fff; 
     display:block;  
     padding:8px 7px 8px 7px; 
     text-decoration:none; 
     border-top:1px solid #F2861D; 
     text-align:center; 
     text-transform:uppercase; 
    } 

    .navigation li a:hover { 
     color:#F2861D; 
    } 


    .navigation ul { 
     position:absolute; 
     left:0; 
     display:none; 
     margin:0 0 0 -1px; 
     padding:0; 
     list-style:none; 
     border-bottom:3px solid #F2861D; 
    } 

    .navigation ul li { 
     width:150px; 
     float:left; 
     border-top:none; 
     overflow: visible; 
    } 


    .navigation ul a { 
     display:block;  
     height:15px; 
     padding:8px 7px 13px 7px; 
     color:#fff; 
     text-decoration:none; 
     border-top:none; 
     border-bottom:1px dashed #6B6B6B; 
    } 

    .navigation ul a:hover { 
     color:#F2861D; 
    }` 

的JavaScript：

$(document).ready(function() { 
    // Navigation function 
    $('.navigation li').hover(function() { 
      $('ul', this).fadeIn(); 
    }, 
    function() {$('ul', this).fadeOut();} 
    ); 

jsFiddle

Answer 1

的住宿，活動和預訂的元素沒有正確嵌套子菜單的ul元素。看看這個代碼JS搗鼓一個修正版本：

http://jsfiddle.net/9NdZC/

這裏只是HTML部分：

<ul class="navigation"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a> 
      <ul> 
       <li><a href="#">History</a></li> 
       <li><a href="#">Location</a></li> 
       <li><a href="#">Gallery Tour</a></li> 
       <li><a href="#">Testimonials</a></li> 

      </ul> 
     </li> 
     <li><a href="#">Accomodations</a> 
      <ul> 
       <li><a href="#">Event Space</a></li> 
       <li><a href="#">Guest Rooms</a></li> 
       <li><a href="#">Kitchen and Catering Facility</a></li> 
      </ul>   
     </li> 
     <li><a href="#">Activities</a> 
      <ul> 
       <li><a href="#">The Katy Trail</a></li> 
       <li><a href="#">Augusta</a></li> 
       <li><a href="#">St. Louis Attractions</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Reservations</a> 
      <ul> 
       <li><a href="#">Rates</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Request Info</a></li> 
       <li><a href="#">Event Agreement Form</a></li> 
      </ul> 
      </li> 
      <li><a href="#">FAQ</a> 
      <ul> 
       <li><a href="#">Additional Info</a></li> 
       <li><a href="#">Catering</a></li> 
      </ul> 
      </li> 
    </ul>