CODEWITHSUNDEEP
jquerycssdrop-down-menu
10010010001011101111
10010010001011101111

Reputation: 59

jquery and css dropdown not working

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;
         }

Upvotes: 0

Views: 114

Answers (3)

bipen
bipen

Reputation: 36531

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..

Upvotes: 0

Rohit416
Rohit416

Reputation: 3486

this code can be in one line.

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

Upvotes: 1

romainberger
romainberger

Reputation: 4558

Put the dropdown in the div and use hover()

Fiddle

Upvotes: 1

Related Questions