当子 <select> 的选项悬停时，元素失去“悬停”状态

Question

我的（目前是私人的）网站上有一个大型菜单。在其中一个下拉列表中是一个 <select> 元素，其中包含足够的选项，当它们展开时，列表会位于大型下拉列表底部的下方。在 FF 和 Chrome 中，下拉菜单保持展开状态。在 IE 中，虽然下拉菜单不再认为它被悬停在上面，并隐藏了

看这里的效果：http://jsfiddle.net/EHSF8/。

菜单用 CSS 显示和隐藏（所以我认为没有事件处理）。我必须支持到IE8。如果绝对必要，我可以使用 javascript 和 jQuery。

有什么想法吗？

Answer 1

<select> 是一种由浏览器控制的类型，这意味着它的组件不一定遵循 DOM 结构。即使从技术上讲您使用的是 #tohover，扩展后的 <select> 也不会将其传送到浏览器。

这不仅仅是 Internet Explorer 的情况。我正在检查 Chrome，它是一样的，当我点击 <select> 并继续悬停选项时，hover 状态被删除。

解决方案

您可以考虑用UL 和LI 替换整个内容，然后将鼠标悬停在CSS 菜单上，效果很好。

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 */

小提琴：
http://jsfiddle.net/vMuxA/（垂直菜单）
http://jsfiddle.net/vMuxA/1/（水平菜单）