如何讓子菜單正確顯示？

Question

我正在構建一個也有水平子菜單的水平導航。 Soh Tanaka有一個很好的教程，但子菜單不能正常顯示。

下面是HTML：

<ul id="mainNav"> 
     <li><a class="selected" href="#">Home</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">About Us</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">Home Remodels</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">New Home Builds</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">Our Portfolio</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     <li><a href="#">Our Blog</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">FAQ'S</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 

這裏是CSS：

ul#mainNav     { 
         clear: both; 
         width: 935px; 
         height: 39px; 
         margin: -5px 0 0 0; 
         padding: 0; 
         float: left; 
         list-style-type: none; 
         position: relative; 
         background-color: #0d0600; 
         font: bold 14px Arial, Helvetica, sans-serif; 
         text-transform: uppercase; 
         color: #fff; 
         } 
ul#mainNav li    { float: left; margin: 0; padding: 0; } 
ul#mainNav li a    { padding: 12px 15px 12px 14px; display: block; text-decoration: none; color: #fff; } 
ul#mainNav li a.selected, 
ul#mainNav li a:hover  { background: #b5a37e url(../_images/bg_mainNav.jpg) repeat-x left top; } 

ul#mainNav span    { 
         float: left; 
         display: none; 
         padding: 15px 0; 
         position: absolute; 
         z-index: 10; 
         left: 0; 
         top: 35px; 
         width: 935px; 
         background-color: #b5a37e; 
         color: #fff; 
         text-transform: none; 
         } 
ul#mainNav li:hover span { display: block; } 
ul#mainNav li span a  { display: inline; } 
ul#mainNav li span a:hover { text-decoration: underline; } 

唯一的問題是，在我的working example，子菜單顯示不出來。

我會很感激這裏的一些指導。

謝謝！

Answer 1

首先你不這樣做是正確....查看公所田中tuturial源...

的HTML代碼塊的結構是這樣的，

<ul id="topnav"> 
     <li><a href="#">Home</a></li> 
     <li> 
      <a href="#">About</a> 
      <span> 
       <a href="#">The Company</a> | 
       <a href="#">The Team</a> | 
       <a href="#">Careers</a> 
      </span> 
     </li> 
....................... 

在

， Home沒有子菜單，因爲它沒有跨度... 不像About它有跨度....有你的html結構的區別？

Answer 2

你從來沒有真正顯示跨度 - 它被設置爲顯示沒有，但我敢肯定，沒有什麼發生了改變，這在任何懸停作業

Answer 3

你必須做一些JavaScript的顯示模塊。我給你在jQuery的例子：

$(document).ready(function(){ 

     $('li a').mouseover(function() { $(this).parent().next().css("display", "inline"); }).mouseout(function() { $(this).parent().next().css("display", "none"); }) 

}); 

沒有測試過，但它應該工作。