<select><option>...</select> selecting options overlays popup

[JLanceWilkinson]

When I define a selection menu: <select class="contextUse" ....> <option>...</option> <option>...</option> ... <option>...</option> </select>

and then in my JavaScript: <script ...> $(document).ready(function() { ...snip... $(".contextUse").contextPopup({ title: "Favorites", items: [ {label:"Go", ...}, {label:"Edit",...}, {label:"Delete",...} ] }); }); </script>

When I right click on the _SELECTED_ element in the select menu, I get the expected popup. When I highlight (but not actually select yet) an element from the SELECT menu's pulldown list, and then right-click, I get the menu but its OVERLAYED by the pulldown of the SELECT menu. Hightlighting and right clicking yet another option in the pulldown overlays ANOTHER popup menu.

I've read this is caused by the z-index of select menus always being higher than anything else, so the simple context menu's z-index is overlaid. So I'm thinking if I can't get it to visually appeal, I should suppress the popups on the options and only make them visible/working on the main selected item. But I can't figure out how to SUPPRESS them there, since the class on the tag seems to inherit over the entire set of tags.

Either way would be workable, any thoughts?