html - 当放置在 CSS 下拉菜单中时，HTML 选择会丢失文档流吗？

Question

好吧，这个问题肯定会造成困惑，但这是我唯一能想到的提出问题的方式。

这是正在发生的事情的要点。我有这个菜单: 编辑:这是请求的 fiddle (注意:您必须在 IE8 中查看它才能重现问题)fiddle

<ul>
<li class="dropdown">
    <a href="#">Sort</a>
    <ul class="dropdown-menu">
        <li>link 1</li>
        <li>link 2</li>
    </ul>
</li>
<li class="dropdown">
    <a href="#">Filter</a>
    <ul class="dropdown-menu">
        <li>
            <div class="usedproducts-filter-container"> 
                <select>
                    <option>option 1</option>
                    <option>option 2</option>
                </select>
            </div>
        </li>
    </ul>
</li>

我正在使用此 CSS 来设置样式并创建下拉功能:

ul {
    position: relative;
    padding: 1em;
    background-color: #eeeeee;
    border: 1px solid #333333;
}

ul > li {
    display: inline;
}

ul > li > a {
    color: #666666;
    margin-left: 1em;
    padding: 1em;
}

ul > li:hover > a {
    color: #111111;
}

ul > li > ul {
    position: absolute;
    padding: 1em;
    background-color: #cccccc;
    border: 1px solid #666666;
    display: none;
}

ul > li:hover > ul {
    display: block;
}

ul > li > ul > li {
    display: block;
}

当我将鼠标悬停在排序菜单上时，它会显示，并且我可以单击链接。 但是，当我将鼠标悬停在过滤器菜单上时，它会显示下拉菜单，我可以在下拉菜单中四处移动鼠标，但是当我单击选择框将其打开并将鼠标移入其中进行选择和选项时，整个下拉菜单消失。就好像选择框实际上并未包含在 UL 下拉列表中。

有没有人知道如何在不使用 JS 的情况下解决这个问题？另外，我认为重要的是要声明这是在 IE8 中。我不知道它在其他浏览器中是如何工作的，因为它被设计为仅支持 IE8。(别问，这是一个很长的故事)。

Answer 1

是的，这确实是因为<select>的下拉部分在文档之外(它是一个 UI 元素)。

如果可以，请考虑使用 <select size="N"> , 与 N是一个合适的数字。这会将您的下拉列表更改为更“选项列表”类型的元素，但它将与 :hover 兼容。 .