Question

I am creating some custom selectboxes with jQuery so I can style them exactly the way I want them.

First I did it with CSS but I wanted the options to open upon clicking and not on hovering. The select is an ul with different li‘s, the first one being the single li visible before the selectbox is opened.

The problem is that I have to bind a mouseout on the menu, but it doesn’t recognise the removal of overflow:hidden; or changes in the height, making it so that the selectbox closes on mouseout of the first li (the originally visible ‘hitbox’).

I have recreated a simple example in jsfiddle:

http://jsfiddle.net/u6mC2/

Answer 1

http://jsfiddle.net/7uw8b/2/

Does this fiddle do what you want? I”m using the jQuery mouseleave event which applies some intelligence to the document hierarchy when calculating mouse exit.