jQuery Drop Down Hover Menu

Question

I\'m new to jQuery, I was hoping you guys could help me. I\'m trying to make a hover dropdown menu, but it\'s extremely buggy. Can you help me clean up my Javascript? Loo

Answer 1

Aram Mkrtchyan's answer was almost there for me. Problem with his was if you add anything below the menu then it gets all screwy. Here is an example of what I mean, I added a div below his menu: http://jsfiddle.net/4jxph/3418/

I am submitting this updated answer using div instead of lists and list items (which I find much easier to work with, and way more flexible) and jQuery version 1.9.1

here is link to jFiddle: http://jsfiddle.net/4jxph/3423/

Here is the code:

--------------- HTML:

    

        

            Actions
        
        

            
File
            
Edit
            
View
            

            
Insert
            
Modify
            
Control
            
Debug
            
Window
            
Help
        
    



    testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu 

--------------- Css:

.lbtn
{
    display:inline-block;
    cursor:pointer;
    height:20px;
    background-color:silver;
    background-repeat:repeat-x;      
    border:1px solid black; /* dark navy blue */ 
    text-decoration:none;
    font-size:11pt;
    text-align:center;
    line-height:20px;
    padding:0px 10px 0px 10px;
}

.divMenuWrapper1
{
    height: 25px;
    width: 75px;
}

.file_menu 
{
    display:none;
    width:250px;
    border: 1px solid #1c1c1c;
    background-color: white;
    position:relative;
    z-index:100000;
}

.file_menu div 
{
    background-color: white;
    font-size:10pt;
}

.file_menu div a 
{
    color:gray; 
    text-decoration:none; 
    padding:3px; 
    padding-left:15px;
    display:block;
}

.file_menu div a:hover 
{
    padding:3px;
    padding-left:15px;
    text-decoration:underline;
    color: black;
}

--------------- jQuery (to be placed in document.ready or pageLoad()):

$("#hoverli").hover(
    function () {
        $('#actions_menu').finish().slideDown('fast');
    },
    function () {
        $('#actions_menu').finish().slideUp('fast');
    }
);