Question

i’ve been researching this for about 3 hours now with no gravy so I finally caved and decided to ask here. I have a jsFiddle i hope someone can look at and help me.

Essentially what is happening is that I am trying to create a simple dropdown menu and it’s working great except for one small issue.

When the submenu comes down, you have to actually mouse over the submenu in order for it to fadeout. You are just on the main link that activates the submenu, and you leave the main link to the right, left, or top, the submenu stays there static.

I tried to write my own little script (which I commented out on the jsFiddle for you to see) with my basic knowledge of JS and it would work if I could get it to only trigger when leaving the link from the top, left and right sides. When you leave the main link and try to access the submenu, the submenu disappears before your mouse even gets to it.

I understand why this is happening (I’m telling it to disappear when it leaves the class .dropdown which is the class applied to main link.) but I don’t know how to fix it. I’m pretty new to JS.

Anyways, sorry if I am confusing you, here is the JS fiddle to get a better grasp.

See if you can see the problem with my code commented out. It will not leave the submenu if you leave the “Products” link to the left, right and top.

Then you can uncomment my code and see why that isn’t working.

http://jsfiddle.net/4wzmf/8/

Answer 1

I think your jQuery code was a bit more complicated than it should have been.

Also, you had a strange structure going on with your main navigation set up. Instead of on main <ul> and child <li> you had every link as its own <ul>. You had the id of “mainnav” on every <ul>, which was kind of strange, and it isn’t valid code. (Side note: You can only use an ID ONCE on a page. If you’re going to use it multiple times, make it a class.)

I also cleaned up some of your CSS the way I like to do it. It doesn’t mean it’s better than what you had.

The HTML:

<ul id="mainnav">
    <li><a href="#">news</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">rentals</a></li>
    <li><a href="#">services</a></li>
    <li class="dropdown"><a href="#" >products</a>
        <ul class="sublinks">
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
        </ul>
    </li>
    <li><a href="#">about</a></li>
    <li class="home"><a href="#">home</a></li>    
</ul>

And the jQuery

$(function() {
   $('.dropdown').mouseenter(function() {
       $('.sublinks').slideDown(300);
   });

   $('.dropdown').mouseleave(function() {
       $('.sublinks').slideUp(300);
   });
});

Anyway, I made a js fiddle and it works well.

http://jsfiddle.net/QhkUn/23/

Basically, what I did was clean up your navigation structure. If you create a nested <ul> of “sublinks” within the <li class="dropdown"> then you can simply say to do everything on mousenter/mouseleave of the “dropdown” main link <li>. This way, it slides up when you mouse out of the “sublinks” ul, because it is a child of “dropdown” – does that make sense?