javascript - jQuery menu on hover open submenu -

i trying design followingl

<ul class="top">   <li><a href="#">menu1</a></li>   <li>     <a href="#">menu2</a>     <ul class="sub">       <li><a href="#">submenu1</a></li>       <li>         <a href="#">submenu2</a>         <ul class="subsub">           <li><a href="#">subsubmenu1</a></li>           <li><a href="#">subsubmenu2</a></li>         </ul>       </li>       <li><a href="#">submenu3</a></li>     </ul>   </li>   <li><a href="#">menu3</a></li> </ul> 

and idea if node has subnodes, submenu open. in instance, if user hovers on menu2, submenu1, submenu2, , submenu3 appear, , if user hovers on submenu2, subsubmenu1, subsubmenu2 appear.

i have following jquery @ moment:

$(document).ready(function () {   $("ul.top li").hover(function () { //when trigger hovered...     if ($("ul.top li").hasclass("sub")) {       $(this).parent().find("ul.sub").slidedown('fast').show();       $(this).parent().hover(function () {}, function () {         $(this).parent().find("ul.sub").slideup('slow');       });     }   }); }); 

however when hover on menu1, submenus menu 2 still opening.

any appreciated!

you have couple of issues need resolved. first, should provide 2 arguments hover() function, first function onmouseenter, other onmouseleave.

next, tag sub menus same class, e.g., sub. make writing selectors easier.

use children() function apply animation direct children of item user hovering over.

$(document).ready(function () {     $("ul.top li").hover(function () { //when trigger hovered...         $(this).children("ul.sub").slidedown('fast');     }, function () {         $(this).children("ul.sub").slideup('slow');     }); }); 

working example