'li'在悬停显示下一个'ul'

Question

I am trying to do a little script which is going to show the next ul when the mouse is over the li link.

This is the 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>

this is the jquery script:

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

and here it is in jsfiddle: http://jsfiddle.net/CDMSK/2/ As you can see it is very noobish what I have done. What is the best way to do this? Any suggestions please?

Answer 1

you can use CSS for showing next ul :

ul ul{
    display:none;
}

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

jsFiddle here

---

and here is the update for showing inner 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