I am trying to design something like the 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 my idea is that if the Node has subNodes, then the submenu will open. So in this instance, if the user hovers on Menu2, the SubMenu1, SubMenu2, and SubMenu3 will appear, and if the user hovers on SubMenu2, SubSubMenu1, SubSubMenu2 will appear.

I have the following jQuery at the moment:

$(document).ready(function () {
  $("ul.top li").hover(function () { //When trigger is 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 I hover on Menu1, the submenus for Menu 2 are still opening.

Any help will be very much appreciated!

I am trying to design something like the 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 my idea is that if the Node has subNodes, then the submenu will open. So in this instance, if the user hovers on Menu2, the SubMenu1, SubMenu2, and SubMenu3 will appear, and if the user hovers on SubMenu2, SubSubMenu1, SubSubMenu2 will appear.

I have the following jQuery at the moment:

$(document).ready(function () {
  $("ul.top li").hover(function () { //When trigger is 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 I hover on Menu1, the submenus for Menu 2 are still opening.

Any help will be very much appreciated!

• javascript
• jquery
• jquery-ui

• Add your css, better make a jsfiddle – Praveen Commented Jul 19, 2013 at 12:28
• Are you sure you want $(this).parent().find() rather than just $this.find() as with the first, you'll go to all the way to the top and search down for ul.sub – dash Commented Jul 19, 2013 at 12:28
• Why use javascript to control your menu? There are tons of css menus out there css3menu. that will work even if the user has javascript disabled. – user2417483 Commented Jul 19, 2013 at 12:29
• I wish to do it in Jquery – JMon Commented Jul 19, 2013 at 12:34
• I added alert("has class"); underneath if ($("ul.top li").hasClass(".sub")) { but none of them are returning this alert, so it seems like the class is not found – JMon Commented Jul 19, 2013 at 12:36

1 Answer 1

You have a couple of issues that need to be resolved. First, you should provide two arguments to the hover() function, the first is a function for onmouseenter, the other is for onmouseleave.

Next, just tag all sub menus with the same class, e.g., sub. This will make writing you selectors much easier.

Use the children() function to only apply the animation to direct children of the item that the user is hovering over.

$(document).ready(function () {
    $("ul.top li").hover(function () { //When trigger is hovered...
        $(this).children("ul.sub").slideDown('fast');
    }, function () {
        $(this).children("ul.sub").slideUp('slow');
    });
});

Working Example