I am currently in the process of customizing selectboxes using jQuery to ensure that they are styled exactly how I envision them.
Initially, I attempted to achieve this through CSS alone, but soon realized that I wanted the options to be revealed upon clicking rather than hovering. The select is structured as a ul with individual li elements, where the first one serves as the solitary visible li prior to opening the selectbox.
The issue arises when attempting to bind a mouseout event to the menu. Despite removing overflow:hidden; or adjusting the height, the script fails to register these changes, causing the selectbox to close once the mouse exits the area of the original 'hitbox' (first li).
A straightforward example demonstrating the problem has been replicated on jsfiddle: