jQuery mouseover and mouseleave drop down menus

Answer 1

  $(document).ready(function () {
                $('#Dropdown').mouseover(function () {
                    $(this).slideDown();
                });
            });
 $(document).ready(function () {
                $('#Dropdown').mouseleave(function () {
                    $(this).slideup();
                });
            });

i think this might help..

Answer 2

hover plugin includes both mouseenter and mouseleave follwing code works fine for me

javascript:

$(document).ready(function(){

    $('.dropdown').hover(
    function(){

        $(this).children('.dropdown-menu.pricing-drop').slideDown('fast');
    },
    function () {
        $(this).children('.dropdown-menu.pricing-drop').slideUp('fast');
    });
});

Answer 3

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();
});

Answer 4

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>