Hello

I'm trying to create a little menu for navigation. Some of the menu items (level 0) have possibly children (level 1) and grandchildren (level 2). (see the html code below). All

I would like to make the level 1 elements visible with a click event on the level 0 elements. When hovering on level 1 elements the level 2 elements (children from the hovered level 1 element) should become visible but with a little delay (like 1 sec.) and then if you 'unhover' on that one it will take 1 second to disappear the level 2 elements that way if you accidently unhover the level 1 element it won't punish you for it because you have 1 sec to hover it again.

so if you slide across all of them, it will only pop up the one you kept your mouse on initially.

I would be pleased if something could help me out

ps: I preferably have a solution with jQuery.

<ul>
  <li> <a href="#">menu item</a>
    <ul>
      <li><a href="#">menu item</a></li>
      <li><a href="#">menu item</a>
        <ul>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
        </ul>
      </li>
      <li> <a href="#">menu item</a>
        <ul>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
        </ul>
      </li>
      <li class=""> <a href="#">menu item</a>
        <ul>
          <li class="first"><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
          <li><a href="#">menu item</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="#">menu item</a> </li>
  <li> <a href="#">menu item</a> </li>
</ul>