Drop down option not working in jQuery

Question

I'm trying to build drop down options on mouse over and on click. The only problem I have with it, is when I put the mouse over an on child element, the menu gets hidden quickly.

jQuery code:

var navPos = $("#topNav").position().top; // ignore this line
// menu drop options
$('.repeat, .recitor, .volume, .bandwidthOption').bind('dropOption', function(e, force) {
    var force = force || 'toggle';

    if ($(this).hasClass('repeat'))
        var optionName = 'repeat';
    else if ($(this).hasClass('recitor'))
        var optionName = 'recitor';
    else if ($(this).hasClass('volume'))
        var optionName = 'volume';
    else if ($(this).hasClass('bandwidthOption'))
        var optionName = 'bandwidthOption';
    else
        return;

    var optionSubName = $(this).find('ul').attr('class');
    var position = $(this).position();
    position.top = navPos;
    var isActive = $(this).hasClass('active');

    if ((isActive && force != 'show') || (force && force == 'hide'))
    {
        $(this).removeClass('active');
        $('.'+optionSubName).hide();
        if (optionName == 'recitor') /* ie fix - z-index issue */
            $('.logoBox').show();
    }
    else
    {
        $(this).addClass('active');
        $('.'+optionSubName).show();
        $('.'+optionSubName).css('left',position.left+'px');
        if (optionName == 'recitor') /* ie fix - z-index issue */
            $('.logoBox').hide();
    }
});
$('.repeat, .recitor').click(function() {
    $(this).trigger('dropOption');
    return false;
});
$('.volume, .bandwidthOption').hover(function() {
    $(this).trigger('dropOption', 'show');
},function() {
    $(this).trigger('dropOption', 'hide');
});

Menu demo: http://jsbin.com/ozokir/2

Answer 1

The last bit is hiding the options:

$('.volume, .bandwidthOption').hover(function() {
    $(this).trigger('dropOption', 'show');
},function() {
    $(this).trigger('dropOption', 'hide');
});

Hover is only over the link option. To solve this you could use:

$('.volume, .bandwidthOption').mouseover(function() {
        $(this).trigger('dropOption', 'show');
    });

or click as you have in the previous line. Then you can hide with:

$('.dropOption').mouseout(function() {
            $(this).trigger('dropOption', 'hide');
        });