jquery and css dropdown not working

Question

The drop down is not working as it should, when you hover over the #crm-userbar a .dropdown will be shown via fadeIn() but it keeps flashing when you try to go onto .dropdown

Well here is a fiddle: http://jsfiddle.net/pVVRn/

jQuery

 $(document).ready(function() {

     $("#crm-userbar").mouseover(function() {
         $(".dropdown").fadeIn();
     }).mouseout(function(){
         $(".dropdown").fadeOut();
     });

 });

CSS

.dropdown {
             position: absolute;
             top: 66px;
             right: 0; 
             background: #0098EA;
             font-weight: normal;
             width: 210px;
             padding: 12px 6px;
             margin: 0px 0px;
             z-index: 100;
             list-style: none;
         }

         .dropdown li a {
             color: #fff;
             width: 210px;
             padding: 12px 6px;
             margin: 0px 0px;
         }

         .dropdown li a:hover {
             display: block;
             text-decoration: none;
             color: #9e9e9e;
             padding: 10px 20px;
         }

romainberger · Accepted Answer · 2013-01-21 10:33:43Z

1

Put the dropdown in the div and use hover()

Fiddle

answered Jan 21, 2013 at 10:33

romainberger

4,5582 gold badges37 silver badges51 bronze badges

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

Comments

Rohit416 · Accepted Answer · 2013-01-21 10:35:54Z

1

this code can be in one line.

$("#crm-userbar").hover(function(){
   $(".dropdown").fadeToggle();
 });

answered Jan 21, 2013 at 10:35

Rohit416

3,4963 gold badges27 silver badges42 bronze badges

Comments

bipen · Accepted Answer · 2013-01-21 10:40:11Z

0

what you need here is .. mouseenter() and mouseleave()

here is the updated fiddle

$("#crm-userbar").mouseenter(function() {
             $(".dropdown").fadeIn();
         }).mouseleave(function(){
             $(".dropdown").fadeOut();
         });

"OR"

use hover() instead.

$( "#crm-userbar" ).hover(function(){
   $(".dropdown").fadeIn();
},function(){
   $(".dropdown").fadeOut();
}

);

you can go through this link to see the real difference between mouseenter and mouseover functions..

edited Jan 21, 2013 at 10:40

answered Jan 21, 2013 at 10:31

bipen

36.6k9 gold badges51 silver badges62 bronze badges

1 Comment

bipen Over a year ago

ok.. yes forgot to mention to move your <ul> list inside ` <div id="crm-userbar">` since you are calling the mouseenter / hover function for the parent <div> ..:).. updated...

Collectives™ on Stack Overflow

jquery and css dropdown not working

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related