css - 当悬停子 <select> 的选项时，元素丢失 "hover"状态

Question

我的(目前是私有(private)的)网站上有一个大型菜单。在其中一个下拉菜单中是一个 <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 */

fiddle :
http://jsfiddle.net/vMuxA/ (垂直菜单)
http://jsfiddle.net/vMuxA/1/ (横向菜单)