Question

I am having trouble with a very simple javascript. It is supposed to show and hide the dropdown menu on my site when the mouse hovers or leaves the menu.

Problem is that my script is triggered by the ul tags of my menu and i have several ULs in my dropdown. when i hover over the menu it shows correctly but when i move the mouse down to one of the nested ULs it hides the dropdown again because of the script.

not sure how to solve this :S

this is my menu:

<div class="menu" id="menu">
        <ul>
            <li><a href="#">Forside</a></li>
            <li><a href="#">Service</a>
                <ul>
                    <li class="menusektion1">
                        <h1>Vores arbejde</h1>
                        <ul>
                            <li><a href="">projekt</a></li>
                            <li><a href="">projekt2</a></li>
                            <li><a href="">projekt3</a></li>
                            <li><a href="">projekt4</a></li>
                        </ul>
                    </li>
                    <li class="menusektion2">
                        <h1>Menupunkt2</h1>
                        <ul>
                            <li><a href="">Title</a></li>
                            <li><a href="">Title2</a></li>
                            <li><a href="">Title3</a></li>
                            <li><a href="">Title4s</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Projekter</a></li>
            <li><a href="#">Referencer</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>    
    </div>

this is my javascript:

    $(document).ready(function(){   
  $('#menu ul > li')
    .mouseenter(function(){
      $(this).find('ul').show();
    })
    .mouseleave(function(){
      $(this).find('ul').hide();
    }); 
});

can someone help me out here?

Answer 1

I understand you want to hide the ul tag inside the hovered li tag. Your syntax is almost correct.
Problem is, I think, you’re adding the event listeners to all li tags inside your menu.
Try this :

$('#menu > ul > li').mouseenter(function(){});

This way the ul and li tags inside the first level ul will lot be affected.