Question

The menu I want to modify has this HTML structure:

<nav>
  <ul id="fashionmenu">
    <li class=""><a href="#">Home<a/></li>
    <li class=""><a href="about.html">About<a/></li>
    <li class=""><a href="#">Services</a>
        <ul>
           <li><a href="#">Service 1</a></li>
           <li><a href="#">Service 2</a></li>
        </ul>
    </li>
    <li class=""><a href="#">Contact</a>
  </ul>
</nav>

What I have tried to accomplish was a delay on the dropdown menu, I already have the Jquery code for it, but for some reason I can’t understand (and here is where I kindly ask you to guide me) why on hover, even if has a nice smooth effect on hover , the menu doesn’t retire unless I hover again on it. BUt , of course, I would want that whenever I move the mouse to a different menu item, the dropdown menu to retire by itself automatically.

Here is the javascript:

    $(function(){
      $('#fashionmenu > li > ul')
        .hide()
        .click(function(e){
        e.stopPropagation();
      });


      $('#fashionmenu > li').toggle(function(){
        $(this)
        .removeClass('waiting')
        .find('ul').slideDown();
      }, function(){
        $(this)
        .removeClass('waiting')
        .find('ul').slideUp();
      });

    $('#fashionmenu > li').hover(function(){
      $(this).addClass('waiting');
        setTimeout(function(){
          $('#fashionmenu .waiting')
          .click()
          .removeClass('waiting');
          },300);
        }, function(){
          $('#fashionmenu .waiting').removeClass('waiting');
        });

    });

Thank you in advance for any answer.

Answer 1

do something like this: http://jsfiddle.net/mwwFn/1/

$(function () {
  $('#fashionmenu > li > ul').hide().click(function (e) {
    e.stopPropagation();
  });

  $('#fashionmenu > li').toggle(function () {
    $(this).removeClass('waiting').find('ul').slideDown();
  }, function () {
    $(this)
      .removeClass('waiting')
      .find('ul').slideUp();
  });

  $('#fashionmenu > li').hover(function () {
    $(this).addClass('waiting').find('ul').slideDown();

  }, function () {
    $(this).removeClass('waiting').find('ul').delay(3000).slideUp();
  });

});