Simple jQuery Dropdown menu using Div's

I'm trying to make a custom & simple Drop down 'menu' using Div's. On mouseenter I'm fading in the div and on mouseout, fadeOut.

If the Div is faded In and you hover it, it stays open, otherwise I'm trying to make the fadedIn Div to fade out without hover in and out. This is what I currently have:

.mouseout(function(){
          if ($(".test").mouseover){
              return false;
          }else{$('.drop1').fadeOut("fast");}
      });

Here is a the fiddle I'm working with: http://jsfiddle.net开发者_如何学运维/FXYhJ/

Also, is there a better way to do this? This is the simpliest way I can imagine. Later On I will be using variables to shorten up the code.

Thanks alot

Here is an edited fiddle. http://fiddle.jshell.net/hG2Lu/19/

A few comments: instead of using you li for the mousenter, i moved it to the a tag inside. When working with nested elements, if you are mousing over the nested element, it doesn't count as being moused over on the parent element. Basically what I did was introduced a timer into your code. If someone mouses out of the nav option, it will wait one second before fading out the sub menu. (you can change this delay by altering the last arguement of setTimout, I set it at 1000, or one second.) This is necessary because there is a gap between the nav and the submenu, so we need to give the user time to mouse their mouse to the sub menu.

Of course you can improve this code using better jquery selectors, But I think you are away of this already?. (You shouldn't have to repeat that block of code for every option on the menu)