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

Question

I have a mega menu on my (currently private) site. Inside one of the dropdowns is a <select> element with enough options that when they're expanded, the list goes below the bottom of the mega dropdown. In FF & Chrome, the dropdown stays expanded. In IE though the dropdown no longer thinks it's being hovered over, and hides

See the effect here: http://jsfiddle.net/EHSF8/.

The menu is shown and hidden with CSS (so no event munging I think). I have to support down to IE8. I can use javascript and jQuery if absolutely necessary.

Any ideas?

Answer 1

The <select> is a type of control by the browser, which means, it doesn't necessarily follow the DOM structure for its components. Even though technically you are on the #tohover, the expanded <select> doesn't convey it to the browser.

This is not just the case with Internet Explorer. I am checking in Chrome, it is the same, as in when I click on the <select> and go ahead with hovering the options, the hover state is removed.

Solution

You can think of replacing the whole thing with UL and LI and make a mouse over CSS menu, which 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 a {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)