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

Answer 1

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