'li'懸停顯示下一個'ul'

Question

我正在嘗試做一個小腳本，它將在鼠標懸停在li鏈接上時顯示下一個ul。

這是HTML：

<ul class="submenu_ul"> 
    <li> 
     <a style="font-weight:bold;" href="index.php?seite=27&amp;parent=25">Klassen 2012/13</a><div style="clear:both;"></div> 
    </li> 
<ul> 
</ul> 
    <li> 
     <a style="font-weight:bold;" href="index.php?seite=28&amp;parent=25">Events 2012/2013 </a><div style="clear:both;"></div> 
    </li> 
<ul> 
</ul> 
    <li> 
     <a style="font-weight:bold;" href="index.php?seite=29&amp;parent=25">Events 2013/2014</a><div style="clear:both;"></div> 
    </li> 
<ul> 
    <li style="margin-left:30px;"> 
     <a href="index.php?seite=427&amp;parent=25">test1</a> 
    </li><li style="margin-left:30px;"> 
     <a href="index.php?seite=428&amp;parent=25">test2</a> 
    </li></ul><li> 
     <a style="font-weight:bold;" href="index.php?seite=36&amp;parent=25">Klassen 2013/14</a><div style="clear:both;"></div> 
    </li> 
<ul> 
    <li style="margin-left:30px;"> 
     <a href="index.php?seite=410&amp;parent=25">1. Klassen</a> 
    </li><li style="margin-left:30px;"> 
     <a href="index.php?seite=422&amp;parent=25">2. Klassen</a> 
    </li><li style="margin-left:30px;"> 
     <a href="index.php?seite=423&amp;parent=25">3. Klassen</a> 
    </li> 
</ul> 

</ul> 

這是jQuery腳本：

$(".submenu_ul li").hover(
    function() { 
    $(this).next('ul').removeClass("hover"); 
    }, function() { 
    $(this).next('ul').addClass("hover"); 
    } 
); 

，在這裏它是在的jsfiddle：http://jsfiddle.net/CDMSK/2/ 正如你可以看到它是非常noobish我做了什麼。做這個的最好方式是什麼？有什麼建議嗎？

Answer 1

你可以使用CSS顯示下一個UL：

ul ul{ 
    display:none; 
} 

ul li:hover + ul{ 
    display:block; 
} 

jsFiddle here

---

，並在這裏爲表示內UL更新：

HTML：

<ul class="submenu_ul"> 
    <li> <a style="font-weight:bold;" href="index.php?seite=27&amp;parent=25">Klassen 2012/13</a> 
     <div style="clear:both;"></div> 

    <ul></ul> 
    </li> 
    <li> <a style="font-weight:bold;" href="index.php?seite=28&amp;parent=25">Events 2012/2013 </a> 
     <div style="clear:both;"></div> 

    <ul></ul> 
    </li> 
    <li> <a style="font-weight:bold;" href="index.php?seite=29&amp;parent=25">Events 2013/2014</a> 
     <div style="clear:both;"></div> 
    <ul> 
     <li style="margin-left:30px;"> <a href="index.php?seite=427&amp;parent=25">test1</a> 

     </li> 
     <li style="margin-left:30px;"> <a href="index.php?seite=428&amp;parent=25">test2</a> 

     </li> 
    </ul> 
    </li> 

    <li> <a style="font-weight:bold;" href="index.php?seite=36&amp;parent=25">Klassen 2013/14</a> 
     <div style="clear:both;"></div> 
    <ul> 
     <li style="margin-left:30px;"> <a href="index.php?seite=410&amp;parent=25">1. Klassen</a> 

     </li> 
     <li style="margin-left:30px;"> <a href="index.php?seite=422&amp;parent=25">2. Klassen</a> 

     </li> 
     <li style="margin-left:30px;"> <a href="index.php?seite=423&amp;parent=25">3. Klassen</a> 

     </li> 
    </ul> 
    </li> 

</ul> 

CSS：

ul ul{ 
    display:none; 
} 

ul li:hover ul{ 
    display:block; 
} 

jsFiddle here