HTML菜單和子菜單顯示

Question

我正在使用基本的HTML ul/li列表，基本的CSS代碼和基本的jQuery代碼編寫菜單導航。我有多個級別的菜單，問題是一旦顯示第一級，它就會自動顯示它下面的所有級別。查看Link以查看是否在行動。 SheetMusic &媒體菜單是有問題的。

我需要幫助讓所有這些子菜單項不顯示默認？你們有沒有人知道我該怎麼做？

我希望你們其中一個人有答案。

摩根肯揚

這裏是我的相關代碼在jsFiddle工作。

HTML

<div id="container"> 
<ul id="dropdown"> 
    <li class="mainnav"><a href="#">About</a></li> 
    <li class="mainnav"><a href="#">Sheet Music</a> 
     <img class="droparrow" src="@ACCOUNTRESOURCES/DropdownTriangle75.png"/> 
     <ul> 
      <li><a href="#">Solos</a> 
       <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png"> 
       <ul> 
        <li><a href="#">Solo 1</a></li> 
        <li><a href="#">Solo 2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Exercises</a> 
       <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png"> 
       <ul> 
        <li><a href="#">Snare Drum</a></li> 
        <li><a href="#">Tenors</a></li> 
        <li><a href="#">Bass Drum</a></li> 
        <li><a href="#">Various Corps.</a></li> 
        <li><a href="#">Drum Set</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Rudiments</a></li> 
     </ul> 
    </li> 
    <li class="mainnav"><a href="#">Gallery</a></li> 
    <li class="mainnav"><a href="#">Media</a> 
     <img class="droparrow" src="@ACCOUNTRESOURCES/DropdownTriangle75.png"> 
     <ul> 
      <li><a href="#">Video</a> 
       <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png"> 
       <ul> 
        <li><a href="#">Solos</a> 
         <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png"> 
         <ul> 
          <li><a href="#">Snare</a></li> 
          <li><a href="#">Tenor</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Ensembles</a></li> 
        <li><a href="#">Rudiments</a></li> 
        <li><a href="#">Miscellaneous</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Audio</a></li> 
     </ul> 
    </li> 
</ul> 

CSS

#dropdown { 
     margin:0px 0px 0px 34px; 
     padding:0; 
     list-style:none; 
    } 
    #dropdown li { 
     float:left;   /* Show list items inline */ 
     margin: 3px 3px 1px 3px; 
     /*padding: 7px 5px 14px 5px;*/ 
     position:relative; 
     font-size:100%; 
    } 
    #dropdown li a { 
     display:block;  /* Making sure a element covers whole li area */ 
     text-decoration:none; /* No underline */ 
     color:#FFFFFF; 
     font-family: Calibri; 
     font-size: 16px; 
     font-weight: bold; 
     padding:1px 7px 1px 7px; 
     margin: 26px 0px 0px 7px; 
    } 
    #dropdown li a:hover { 
     background:rgba(255,255,255,.75); 
     color:#000000; 
     cursor:pointer; 
     text-decoration:none; 
     /*margin: 0px 0px 7px 7px;*/ 
     border-radius:2px; 
     -moz-border-radius:25px; /* Firefox 3.6 and earlier */ 
    } 
    /*Second Level */ 
    #dropdown ul { 
     position:absolute; 
     left:0; 
     display:none; 
     margin:-3px 0px 0px 7px; 
     padding:0px 0px 0px 0px; 
     list-style:none; 
     background: rgba(255, 255, 255, 0.75); 
     border-radius:3px; 
     z-index:4; 
    } 
    #dropdown ul:hover { 
     position:absolute; 
     left:0; 
     margin:-3px 0px 0px 7px; 
     padding:0px 0px 0px 0px; 
     list-style:none; 
    } 
    #dropdown ul li { 
     float:left; 
     width:108px; 
     height:20px;  
     padding: 0px 0px 0px 0px; 
     border-top:none; 
    } 
    #dropdown ul li a { 
     display:block;  /* Making sure a element covers whole li area */ 
     width:100px; 
     padding: 2px 10px 2px 5px; 
     margin: 0px 0px 0px 0px; 
     color:#000000; 
     text-decoration:none; 
    } 

    #dropdown ul li a:hover { 
     padding: 2px 0px 2px 5px; 
     margin: 0px 0px 0px 0px; 
     color: rgba(255,255,255,1); 
     background: rgba(0,0,0,.75); 
    } 
    /*Third Level */ 
    #dropdown ul ul { 
     position:absolute; 
     display:none; 
     left:0; 
     padding:0px 0px 0px 0px; 
     margin:-22px 0px 0px 118px; 
    } 
    #dropdown ul ul:hover { 
     padding:0px 0px 0px 0px; 
     margin:-22px 0px 0px 118px; 
    } 
    .droparrow { 
     margin: 10px 0px 0px 30px; 
     display:none; 
    } 
    .dropRarrow { 
     position:absolute; 
     display:none; 
     margin: -23px 0px 0px 111px; 
    } 

jQuery的

$(document).ready(function() {  
     $('#dropdown li').hover(
      function() { 
       $('ul, img', this).show(); 
      }, 
      function() { 
       $('ul, img', this).hide(); 
      } 
     ); 
    });​ 

Answer 1

在你的懸停功能，顯示所有的UL和IMG元素裏面。使用直接子選擇器來解決這個問題：

$(' > ul, > img', this).show();