jQuery mouseover and mouseleave drop down menus

Question

The following displays a menu:

<a href="#" id="cityclick">ONZE WAARDEN</a>

<div id="citydrop">
    <div class="dropbottom">
        <div class="dropmid">
            <ul>
                <li><a href="#">FAQ</a>
                </li>
                <li><a href="#">ITC</a>
                </li>
                <li><a href="#">CLUB</a>
                </li>
                <li><a href="#">CULTUUR</a>
                </li>
                <li><a href="#">ROBITICA</a>
                </li>
            </ul>
        </div>
    </div>
</div>

The jQuery for is as follows :

$("#citydrop").hide();

$("#cityclick").mouseover(function () {
    $("#citydrop").slideDown('slow');
});

$("#citydrop").mouseleave(function () {
    $("#citydrop").slideUp('slow');
});

PROBLEM: I'm not able to figure out how to toggle the submenu "citydrop" when the mouse leaves "cityclick" but does not enter "citydrop" yet.

I tried out here jsfiddle

Solution 1

Use some wrapper on your html, and then call mouseleave event on it, like there: http://jsfiddle.net/9yEHV/11/

$("#wrapper").mouseleave(function () {
    $("#citydrop").slideUp('slow');
});

And wrapper:

<div id="wrapper">
    <a href="#" id="cityclick" >ONZE WAARDEN</a>
    <!-- rest of your code -->
</div>

Solution 2

Is this what you are trying to do?

HTML

<ul>
<li class="main-menu">
  ONZE WAARDEN
  <ul class="sub-menu" style="display: none;">
    <li><a href="#">FAQ</a></li>
    <li><a href="#">ITC</a></li>
    <li><a href="#">CLUB</a></li>
    <li><a href="#">CULTUUR</a></li>
    <li><a href="#">ROBITICA</a></li>
  </ul>
</li>
</ul>

Javascript

$('.main-menu').mouseenter(function(){
  $(this).find('.sub-menu').slideDown();
});

$('.main-menu').mouseleave(function(){
  $(this).find('.sub-menu').slideUp();
});

Comments

[dora]

Yeah, this way it's easy but sigh ! I am not supposed to change the HTML code or add any classes as you did.

[Tan Nguyen]

You should have mentioned it in your question