CODEWITHSUNDEEP
jquerydrop-down-menurollover
Phil
Phil

Reputation: 205

jQuery Dropdown

I've been able to make a jQuery drop down, however, I can't make it stay expanded when one of the child links is rolled over.

Code:

<li>
    <a  onmouseover="$('.dropdown-1').slideDown('medium');" href="/hosting">Why Veoloo</a>
      <ul class="dropdown-1">
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">The Reasons (15)</a></li> 
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Customer Testimonials</a></li>
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Our Support Scope</a></li>
      </ul>
    </li>

Upvotes: 0

Views: 3643

Answers (1)

Gabriel
Gabriel

Reputation: 18780

html:

<li id="menu">
  <a href="/hosting">Why Veoloo</a>
  <ul class="dropdown-1">
    <li><a href="#">The Reasons (15)</a></li> 
    <li><a href="#">Customer Testimonials</a></li>
    <li><a href="#">Our Support Scope</a></li>
  </ul>
</li>

javascript :

$(function(){
  $('.dropdown-1').hide();
  $('#menu').hover(function(){
        $('.dropdown-1').slideDown('medium');
  }, function(){
        $('.dropdown-1').slideUp('medium');
  });
})

example:

http://jsfiddle.net/gurPn/1/

[EDIT]: Updated to use hover method (jQuery) and trigger the hove off of the parent container (this allows the mouseleave event to be captured only on the container giving the desired drop down effect).

Upvotes: 3

Related Questions