css - Element losing "hover" status when a child <select>'s options are hovered -

i have mega menu on (currently private) site. inside 1 of dropdowns <select> element enough options when they're expanded, list goes below bottom of mega dropdown. in ff & chrome, dropdown stays expanded. in ie though dropdown no longer thinks it's being hovered over, , hides

see effect here: http://jsfiddle.net/ehsf8/.

the menu shown , hidden css (so no event munging think). have support down ie8. can use javascript , jquery if absolutely necessary.

any ideas?

the <select> type of control browser, means, doesn't follow dom structure components. though technically on #tohover, expanded <select> doesn't convey browser.

this not case internet explorer. checking in chrome, same, in when click on <select> , go ahead hovering options, hover state removed.

solution

you can think of replacing whole thing ul , li , make mouse on css menu, works well.

html

<ul class="nav">     <li>         <a href="#">menu 1</a>         <ul>             <li><a href="#">sub menu item</a></li>             <li><a href="#">sub menu item</a></li>             <li><a href="#">sub menu item</a></li>         </ul>     </li>     <li>         <a href="#">menu 2</a>         <ul>             <li><a href="#">sub menu item</a></li>             <li><a href="#">sub menu item</a></li>             <li><a href="#">sub menu item</a></li>         </ul>     </li>     <li>         <a href="#">menu 3</a>         <ul>             <li><a href="#">sub menu item</a></li>             <li><a href="#">sub menu item</a></li>             <li><a href="#">sub menu item</a></li>         </ul>     </li> </ul> 

css

* {font-family: "segoe ui", tahoma;} ul.nav {border-bottom: 1px solid #999;} ul.nav li {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;} ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;} ul.nav li a:hover {background: #ccc; border: 1px solid #999;} ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;} ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;} ul.nav > li:hover ul {display: block;} ul.nav > li ul li {display: block;} /* vertical menu */ ul.nav > li ul li {display: inline-block;} /* horizontal menu */ 

fiddle:
http://jsfiddle.net/vmuxa/ (vertical menu)
http://jsfiddle.net/vmuxa/1/ (horizontal menu)