Css “元素丢失”；悬停“；当孩子出生时的状态<；选择>'；s选项悬停

我的（目前是私人）网站上有一个超大菜单。在其中一个下拉列表中有一个

元素，该元素具有足够的选项，当它们展开时，列表将位于超级下拉列表的底部。在FF&Chrome中，下拉列表保持展开状态。在IE中，下拉菜单不再认为它被悬停在上面，而是隐藏起来

请参见此处的效果：

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

有什么想法吗？

该

是浏览器的一种控件，这意味着它的组件不一定遵循DOM结构。从技术上讲，即使您使用的是

#tohover

，扩展的

也不会将其传送到浏览器

这不仅仅是Internet Explorer的情况。我正在检查Chrome，这与在中一样，当我单击

并继续悬停选项时，

悬停

状态被删除

解决方案 您可以考虑用

UL

和

LI

替换整个内容，并在CSS菜单上制作一个鼠标，效果很好

HTML Fiddle:
（垂直菜单）
（水平菜单）浏览器的控件类型是

，这意味着它的组件不一定遵循DOM结构。从技术上讲，即使您使用的是

#tohover

，扩展的

也不会将其传送到浏览器

这不仅仅是Internet Explorer的情况。我正在检查Chrome，这与在中一样，当我单击

并继续悬停选项时，

悬停

状态被删除

解决方案 您可以考虑用

UL

和

LI

替换整个内容，并在CSS菜单上制作一个鼠标，效果很好

HTML

---

Fiddle:
（垂直菜单）
（水平菜单）我最初希望使用a，因为它在任何浏览器中看起来都像a，这表明它是与本机OS/浏览器UI的下拉菜单。我想我得尽力了。感谢您确认我不想听的内容；）@泡菜你可能会考虑尝试。我最初想和A一起去的是它看起来像一个浏览器中的任何一个-传达这个事实，它是用原生操作系统/浏览器UI下拉。我想我得尽力了。感谢您确认我不想听的内容；）@泡菜你不妨考虑一下。

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

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