DropDown multilevel menu with hover

[blsn]

The following is basic working DropDown menu, child’s appear on hover parent text.

<script type="text/javascript">
  $(document).ready(function () { 
    $('#nav ul').hide();

    $('#nav li > a').hover(
      function () {$('ul', this.parentNode).stop().slideDown(100);}
    );

   $('#nav li').hover(null, 
      function (e) {$('ul', this.parentNode).stop().slideUp(100);}
   );

  }
  );
</script>

<ul id="nav">
  <li><a href="#">Parent A</a>
    <ul>
      <li><a href="#">Sub a1</a>
          <ul>
            <li><a href="#">Item a1.1</a></li>
            <li><a href="#">Item a1.2</a></li>
            <li><a href="#">Item a1.3</a></li>
        </ul> 
      </li>
      <li><a href="#">Sub a2</a></li>
      <li><a href="#">Sub a3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent B</a>
    <ul>
      <li><a href="#">Sub b1</a></li>
      <li><a href="#">Sub b2</a></li>
      <li><a href="#">Sub b3</a></li>
    </ul> 
  </li>
</ul>

I’ve added above a third level under submenu, but it's not opening and closing this level.

I’m not sure in this case if I need to change the html code or is it only the JavaScript that needs to be changed so that the script will work properly also with the added 3rd level.

[ReFreezed]

I changed some things to get your menu working:

* Limit the jQuery selection with :eq(0) when animating a menu. This was probably the main problem - all submenus were opening when hovering over a parent.

* Remove the CSS height property after animation. The parent menus won't expand properly when opening submenus if this is skipped.

* Changed hover with mouseenter and mouseleave. (Hover might work but this looks a bit clearer.)

<script type="text/javascript">

  $(document).ready(function(){

    function resetHeight(){ $(this).height(''); }

    $('#nav ul').hide();

    $('#nav li > a').mouseenter(function(){
      $('ul:eq(0)', this.parentNode).stop().slideDown(100, resetHeight);
    });

    $('#nav li').mouseleave(function(){
      $('ul:eq(0)', this).stop().slideUp(100, resetHeight);
    });

  });

</script>

<ul id="nav">
  <li><a href="#">Parent A</a>
    <ul>
      <li><a href="#">Sub a1</a>
        <ul>
          <li><a href="#">Item a1.1</a></li>
          <li><a href="#">Item a1.2 with Sub</a>
            <ul>
              <li><a href="#">Sub item a1.2.1</a></li>
              <li><a href="#">Sub item a1.2.2</a></li>
              <li><a href="#">Sub item a1.2.3</a></li>
            </ul>
          </li>
          <li><a href="#">Item a1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Sub a2</a></li>
      <li><a href="#">Sub a3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent B</a>
    <ul>
      <li><a href="#">Sub b1</a></li>
      <li><a href="#">Sub b2</a></li>
      <li><a href="#">Sub b3</a></li>
    </ul>
  </li>
</ul>

[blsn]

Thank you for your response.

I changed your script to slowing up and down the display of the menu’s (from 100 to 700, see the code below), but I get a blinking effect on the sliding up items when collapsing is done.

<script type="text/javascript">

$(document).ready(function(){

function resetHeight(){ $(this).height(''); }

$('#nav ul').hide();

$('#nav li > a').mouseenter(function(){
$('ul:eq(0)', this.parentNode).stop().slideDown(700, resetHeight);
});

$('#nav li').mouseleave(function(){
$('ul:eq(0)', this).stop().slideUp(700, resetHeight);
});

});

</script>

<ul id="nav">
<li><a href="#">Parent A</a>
<ul>
<li><a href="#">Sub a1</a>
<ul>
<li><a href="#">Item a1.1</a></li>
<li><a href="#">Item a1.2 with Sub</a>
<ul>
<li><a href="#">Sub item a1.2.1</a></li>
<li><a href="#">Sub item a1.2.2</a></li>
<li><a href="#">Sub item a1.2.3</a></li>
</ul>
</li>
<li><a href="#">Item a1.3</a></li>
</ul>
</li>
<li><a href="#">Sub a2</a>
<ul>
<li><a href="#">Item a2.1</a></li>
<li><a href="#">Item a2.2 with Sub</a>
<ul>
<li><a href="#">Sub item a2.2.1</a></li>
<li><a href="#">Sub item a2.2.2</a></li>
<li><a href="#">Sub item a2.2.3</a></li>
</ul>
</li>
<li><a href="#">Item a1.3</a></li>
</ul>
</li>
<li><a href="#">Sub a3</a></li>
</ul>
</li>
<li><a href="#">Parent B</a>
<ul>
<li><a href="#">Sub b1</a></li>
<li><a href="#">Sub b2</a></li>
<li><a href="#">Sub b3</a></li>
</ul>
</li>
</ul>

Could you please help on this matter,

[blsn]

resend...

<script type="text/javascript">

  $(document).ready(function(){

    function resetHeight(){ $(this).height(''); }

    $('#nav ul').hide();

    $('#nav li > a').mouseenter(function(){
      $('ul:eq(0)', this.parentNode).stop().slideDown(100, resetHeight);
    });

    $('#nav li').mouseleave(function(){
      $('ul:eq(0)', this).stop().slideUp(100, resetHeight);
    });

  });

</script>

<ul id="nav">
  <li><a href="#">Parent A</a>
    <ul>
      <li><a href="#">Sub a1</a>
        <ul>
          <li><a href="#">Item a1.1</a></li>
          <li><a href="#">Item a1.2 with Sub</a>
            <ul>
              <li><a href="#">Sub item a1.2.1</a></li>
              <li><a href="#">Sub item a1.2.2</a></li>
              <li><a href="#">Sub item a1.2.3</a></li>
            </ul>
          </li>
          <li><a href="#">Item a1.3</a></li>
        </ul>
      </li>
      <li><a href="#">Sub a2</a></li>
      <li><a href="#">Sub a3</a></li>
    </ul>
  </li>
  <li><a href="#">Parent B</a>
    <ul>
      <li><a href="#">Sub b1</a></li>
      <li><a href="#">Sub b2</a></li>
      <li><a href="#">Sub b3</a></li>
    </ul>
  </li>
</ul>