Question

live example: http://jsbin.com/axaqoc/2

when i try to select the child select box, the dropDown menu hides away, thinking the mouse went away from parent element.

js code: (complete code: http://pastie.org/2624436)

$('.dropOption').hover(function(e) {
        e.stopPropagation();
        $(this).trigger('dropOption', 'show'); // show the parent element
        return false;
    },function(e) {
        e.stopPropagation();
        $(this).trigger('dropOption', 'hide'); // hide the parent on mouse out
        return false;
    });

how can i stop the bubbling on select drop down menu? (btw this works fine on chrome, but does not on any other browser.)

html code:

<ul><li id="repeat" class="dropOption active"><a href="#" class="dropLink active tips" data-tips-position="right center"><span class="icon repeat">Repeat Off</span></a>
                        <ul class="repeatOptions active">
                            <li><label>Repeat Each</label> <select class="repeatEach" name="repeatEach"><option value="ayah">Ayah</option><option value="page">Page</option><option value="surah">Surah</option><option value="Juz">Juz</option></select></li>
                            <li><label>Repeat Times</label> <select class="repeatTimes" name="repeatTimes"><option value="1">x1</option><option value="2">x2</option><option value="3">x3</option><option value="4">x4</option><option value="5">x5</option><option value="6">x6</option><option value="7">x7</option><option value="8">x8</option><option value="9">x9</option><option value="0">&infin;</option></select></li>
                            <li><label>Delay</label> <select class="repeatDelay" name="repeatDelay"><option value="0">0 sec</option><option value="1">1 sec</option><option value="2">2 sec</option><option value="3">3 sec</option><option value="4">4 sec</option><option value="5">5 sec</option><option value="5">5 sec</option><option value="6">6 sec</option><option value="7">7 sec</option><option value="8">8 sec</option><option value="9">9 sec</option><option value="ayah">Ayah Duration</option></select></li>
                        </ul>
                    </li>
                </ul>

Answer 1

e.relatedTarget = null if mouse is over select box

    $('.dropOption').hover(function(e) {
            $(this).trigger('dropOption', 'show');
        },function(e) {
            if (e.relatedTarget != null) // drop down select box fix
                $(this).trigger('dropOption', 'hide');
        });