CODEWITHSUNDEEP
jquerycss
Mekong
Mekong

Reputation: 449

jQuery CSS Dropdown menu

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.

Upvotes: 0

Views: 1467

Answers (1)

Lu Roman
Lu Roman

Reputation: 2260

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

Upvotes: 1

Related Questions