Question

I am building a small dropdown menu with jQuery, but i am have a small issue.
When I enter the menu it drops down, but when i want to go to the dropdown part with my mouse it will go back up(hide).
This is because the markup of the menu is a little bit different than most jQuery dropdown menus(i think).

The menu should be visible if a user hovers the a tag, but because the div tag isn’t a child of the a tag so it will fadeout if a user leave the a tag. Is there a way to fix this? I cant find any thing about this on the web.

Menu markup

     <ul>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
    </ul>

jQuery code markup

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

        $(this).next('div').fadeIn(200);

    },function(){

        $(this).next('div').fadeOut(200);

    });

Answer 1

The fade out shouldn’t be bound to the anchor but to the div.

You can begin to show the div when anchor is hovered:

$('a').on("mouseenter", function() {
  $(this).next('div').fadeIn(200);
});

Then hide the div when mouse leaves it:

$('div').on("mouseleave", function() {
  $(this).fadeOut(200);
});