Showing a div on mouseover

Question

I've got a bunch of nested divs, ul's etc. Structure is shown here.

<script>
$(document).ready(function() {
    $('#top-level').mouseover( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    });
    $('#top-level').mouseout( function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
</script>

<div id="top-level">
    <div>
        <div class="action" style="display:none;">
            <ul class="drop" style="display:none;">
                <li>Text Here</li>
                <li>Text Here</li>
                <li>Text Here</li>
            </ul>       
        </div>
    </div>
</div>

The ul shown here is being shown on a rollover. The .drop css is set as position:absolute so that it appears over the top-level div.

So, the ul drop appears nicely but as soon as it come in contact with the mouse cursor it goes mad (blinds up and down non stop etc)! Now this will have something to do with the mouse over losing focus in some way.

For this sort of effect to work properly how should I go about it? I want to be able to scroll over the div and chose options from the drop ul after it appears.

Thanks in advance.

Answer 1

http://jsfiddle.net/PDdKL/

Use hover instead:

$(document).ready(function() {
    $('#top-level').hover( function() {
        $( this ).find('.action').show();
        $( this ).find('.drop').show('slide');
    }, function(){
        $( this ).find('.drop').hide('blind', function(){
            $('.action').hide();
        });
    });
});