Question

I cant get the jquery menu to work like it should

When i hover class .trigger is slides down but when i go down with my mouse is slide up and down all the time.

LINK TO WEBSITE: HERE

Jquery

<script type="text/javascript">
    $(document).ready(function () { 

        $('.sub_menu').hide();

        $('.trigger,.sub_menu').mouseenter(function() {
        //show its submenu
            $('.sub_menu').slideDown(300); 
        }); 

        $('.sub_menu,.trigger').mouseleave(function() {
        //show its submenu
            $('.sub_menu').slideUp(300); 
        }); 


    });
</script>

HTML

<div id="header">
    <div class="container">
        <a href="index.php"><h1 id="logo">Dick van Leeuwen Financieel Consult</h1></a>

        <div id="nav">
            <ul class="main_menu">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#" class="trigger">Hypotheken</a>
                    <ul class="sub_menu">
                        <li><a href="#">Hypotheekvormen</a></li>
                        <li><a href="#">Hyporheek rente</a></li>
                        <li><a href="#">Nationale hypotheek garantie</a></li>   
                    </ul>
                    <div class="clear"></div>                       
                </li>
                <li><a href="#">Verzekeringen</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!-- nav -->
    </div><!-- container -->
</div><!-- header -->

Please help me getting stuck for about 5 hours now.

Answer 1

you could make the li your trigger instead of the a. that way you shouldn’t get the mouseleave event when hovering the sub_menu:

 <li><a href="#">Home</a></li>
      <li class="trigger">
           <a href="#">Hypotheken</a>
           <ul class="sub_menu">
                <li><a href="#">Hypotheekvormen</a></li>
                <li><a href="#">Hyporheek rente</a></li>
                <li><a href="#">Nationale hypotheek garantie</a></li>   
           </ul>
           <div class="clear"></div>                       
        </li>
        <li><a href="#">Verzekeringen</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Contact</a></li>

then change your js to that:

$('.trigger').mouseenter(function() {
    $('.sub_menu').slideDown(300); 
}).mouseleave(function() {
    $('.sub_menu').slideUp(300); 
});