JQuery Hover - Navigation Menu with labels that hide on hover and display a drop-down menu (select input)

Question

I have a navigation bar used to filter the results of a search. I am trying to keep things clean and reasonable sized, so I have a JQuery .hover function that basically hides the label of the filter option on hover, and replaces it with the drop down menu to select from.

My only problem is, once you hover on the label, and drop the menu down, if you move the mouse to select an option that is not displayed within the boundaries of the li, it thinks you are hovering off and then hides the select and shows the label.

Any ideas to have the hover function not think you are off while the select menu is dropped and you are trying to select an option?

$('li').hover(
    function(){
        $(this).children('.nav_label').hide();
        $(this).children('.nav_select').show();
    },
    function(){
        $(this).children('.nav_label').show();
        $(this).children('.nav_select').hide();
    }
);

<li><p>
    <div class="nav_label">Menu Options</div>
    <div class="nav_select" style="display:none;">
    <select >
        <option value="" selected="selected">Choose an Option</option>
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
    </select>   
    </div>
</p></li>

Answer 1

So I don't think there is a great way to do this. What seems to happen is that in IE and FF the hover out event gets triggered because the select dropdown list exists outside of the li container.

So what you have to do is check whether the dropdown list has focus. If so, then don't rehide the select list.

http://jsfiddle.net/mrtsherman/kpwJ9/3/

The :focus selector is jQuery 1.6+. I include a log statement to show the active element in case you are using older jQuery. I am sure you could code your own solution around that. I changed your html slightly, but you should be able to implement this using your existing html structure with some additional jquery. I don't think its relevant to the answer though.

$('li').hover(

function() {
    $(this).children('.nav_label').hide();
    $(this).children('.nav_select').show();
}, function() {
    console.log(document.activeElement.id);
    if (!$('#myList').is(':focus')) {
        $(this).children('.nav_label').show();
        $(this).children('.nav_select').hide();
    }
});