<select>
is a replaced element, and as a result the UI elements may not be a part of the DOM itself. Therefore, when you mouse over an option, you are no longer hovering over the "main" element and it gets hidden. This causes the select to be hidden, and a hidden select can't be worked on by the user.
There's no easy fix to this, but consider using an onfocus
event on the <select>
to force the browser to keep it visible (apply a class to a parent element?) and of course onblur
to cancel that.