jQuery CSS Dropdown menu

Question

I'm posting this question again (hope that is the right thing to do). Since I originally posted this question I've been able to more specifically recognize what's causing the problem (although I, myself, still can't figure out how to solve it ... still a newbie to this stuff).

I've set up a horizontal dropdown menu with pretty standard HTML and CSS:

HTML:

   <div id="nav-container">
      <nav id="menu-wrap">    
        <ul id="menu">
            <li><a href="/">Home</a></li>
            <li>
                <a href="">Categories</a>
                <ul>
                    <li>
                        <a href="">CSS</a>
                        <ul>
                            <li><a href="">Item 11</a></li>

                            <li><a href="">Item 12</a></li>
                            <li><a href="">Item 13</a></li>
                            <li><a href="">Item 14</a></li>
                        </ul>               
                    </li>
                    <li>
                        <a href="">Graphic design</a>

                        <ul>
                            <li><a href="">Item 21</a></li>
                            <li><a href="">Item 22</a></li>
                            <li><a href="">Item 23</a></li>
                            <li><a href="">Item 24</a></li>
                        </ul>               
                    </li>
          </ul>
       </ul>
   </nav>
</div>

CSS (too much to show it all here but all pretty standard). Here's the bit I think is part of the problem):

#menu li ul {
   display: none;
   position: absolute;
   left: 0;
   top: 100%;
   padding: 0; 
   margin: 0;
}

JQUERY:

$('#menu>li').hover(function(){
   $(this).closest('li').find('>ul').css({'opacity':0,'margin-       top':20}).show().animate({'margin-top':1,'opacity':1},300);
   },function(){
   $(this).find('>ul').fadeOut("slow");

});

The sub-menus (nested tags) animate in OK but don't fade out as expected. When the mouse is moved away from the menu the sub-menu doesn't fade out as I would like, it instantly disappears.

What I think is happening is that when mouse is moved away from menu, the CSS (see snippet above) kicks in, overides the jQuery, and the nested tags are immediately reset to display:none. The fadeOut("slow") function doesn't get a chance to happen.

Can anyone show me how to have the sub-menus set to invisible on page load, but also respond fully to jQuery when a user hovers over/ 'hovers off' the menu so that the sub-menus animate in and also fade out??

Thanks.

You say pretty standard. While you might be right it is hard to reproduce the exact error when we do not have the "working" example. I suggest you to create fiddle and then we can look at it. Moreover, static css is not overwriting your jQuery css. — Matúš Dúbrava
– Matúš Dúbrava, Commented Mar 17, 2014 at 0:21
I have tweaked your HTML, jQuery and CSS. I'm not using .hide a.k.a display: noneas this would render your navigation in-accessible to users on screen readers. See demo — Jack
– Jack, Commented Mar 17, 2014 at 0:57

Lu Roman · Accepted Answer · 2014-03-17 00:54:53Z

1

You are setting the top rule of your inner ul to 100%, so basically when it shows it does below the current rendered page, so you won't be able to see it. To fix it you must set first the li containing it (or any as long as that one too) have the display property to relative. That way your ul will be absolute positioned relative to that li, and add a minor offset in the top position to place it correctly, like this

#menu li ul {
   display: none;
   position: absolute;
   left: 0;
   top: 20px;
   padding: 0; 
   margin: 0;
}
#menu li{
    position:relative;
}

Your jq can stay as it is but i've formatted and added the stop() method before the fade in/out

$('#menu>li').hover(function(){
       $(this).closest('li').
       find('>ul').
       css({'opacity': 0,'margin-top': 20}).
       show().
       stop().
       animate({'margin-top': 1,'opacity': 1}, 300);
   },function(){
       $(this).find('>ul').stop().fadeOut("slow");
   });

jsfiddle Demo

edited Mar 17, 2014 at 0:54

answered Mar 17, 2014 at 0:49

Lu Roman

2,2703 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mekong Over a year ago

Hi Zarich, Apologies for delay in getting back to you. This is exactly what I was after. Have got my dropdown menu working with your jQuery, however, noticed a new problem ... when the sub-menu appears on hover, and animates upwards, I cannot get it to come to rest under the containing <div id="nav-container">. Instead, currently, it moves to overlap the containing <div>, stopping immediately under the link text (Categories). If I set it to animate to a lower point, this causes problems when the mouse is moved down over the sub-menu (e.g. sub-menu disappears for a moment). Any advice?

Lu Roman Over a year ago

Sure no problem, in this case you are using a submenu inside a submenu, so its like a thirdLevel menu, in the jquery you can see the direct child selector "#menu>li" with matches only a child in first level, so we must change it to "#menu li" so it can go as far in the tree as you want. Next you want to make a class for that sublevel and move it aside so it won't be on top of the first submenu. Here is the demo jsfiddle.net/z4566/1 Good luck =)

Mekong Over a year ago

Zarich, apologies for delay in getting back to you. Thanks for your solution. All working now. Much appreciated!

Collectives™ on Stack Overflow

jQuery CSS Dropdown menu

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related