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&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&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&parent=25">Events 2013/2014</a><div style="clear:both;"></div>
</li>
<ul>
<li style="margin-left:30px;">
<a href="index.php?seite=427&parent=25">test1</a>
</li><li style="margin-left:30px;">
<a href="index.php?seite=428&parent=25">test2</a>
</li></ul><li>
<a style="font-weight:bold;" href="index.php?seite=36&parent=25">Klassen 2013/14</a><div style="clear:both;"></div>
</li>
<ul>
<li style="margin-left:30px;">
<a href="index.php?seite=410&parent=25">1. Klassen</a>
</li><li style="margin-left:30px;">
<a href="index.php?seite=422&parent=25">2. Klassen</a>
</li><li style="margin-left:30px;">
<a href="index.php?seite=423&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?
you can use CSS for showing next ul :
ul ul{
display:none;
}
ul li:hover + ul{
display:block;
}
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&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&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&parent=25">Events 2013/2014</a>
<div style="clear:both;"></div>
<ul>
<li style="margin-left:30px;"> <a href="index.php?seite=427&parent=25">test1</a>
</li>
<li style="margin-left:30px;"> <a href="index.php?seite=428&parent=25">test2</a>
</li>
</ul>
</li>
<li> <a style="font-weight:bold;" href="index.php?seite=36&parent=25">Klassen 2013/14</a>
<div style="clear:both;"></div>
<ul>
<li style="margin-left:30px;"> <a href="index.php?seite=410&parent=25">1. Klassen</a>
</li>
<li style="margin-left:30px;"> <a href="index.php?seite=422&parent=25">2. Klassen</a>
</li>
<li style="margin-left:30px;"> <a href="index.php?seite=423&parent=25">3. Klassen</a>
</li>
</ul>
</li>
</ul>
CSS:
ul ul{
display:none;
}
ul li:hover ul{
display:block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.