Minor jQuery Dropdown Menu Issue [Beginner]

Hey guys,

I am developing a dropdown menu using jQuery (I'm still a beginner). Basically, this is what I am having trouble with:

When I hover my mouse over "li.guide", the menu slides down as it should. But, when I try to click on or just hover on the menus that dropped down, the menu slides back up. Basically, the script I pasted below says this (the incorrect approach):

"Hover over li.guide, drop the menu down. When someone hovers off li.guide, collapse it."

And what i want to happen is someone hovers over li.guide and they move their mouse down to be able to click the content in the dropdown menu. But, when they hover their mouse off of the menu, it collapses.

I hope I was clear enough! Here's the code:

$(document).ready(function() {
    $('li.guide').mouseover(function() {
        $('ul#guides_sub').slideDown('medium');
    }).mouseout(function() {
        $('ul#guides_sub').slideUp('medium');
    });
});

Code (markup):

I am just not sure how to change this code to how I want, but I know what I want it to do. Any help is very appreciated. Thanks!

 

I think mouseenter and mouseleave can help you.

use them instead of the mouseover and mouseout because they are fired only when exiting the element NOT to a child.