HTML选择是否会在放置在CSS下拉菜单中时丢失文档流？

好吧，这个问题肯定会引起混乱，但这是我唯一能想到的提问方式

下面是发生的事情的要点。我有这个菜单： 编辑：这是请求的提琴（注意：为了复制问题，您必须在IE8中查看）

当我将鼠标悬停在“排序”菜单上时，它会显示出来，我可以单击一个链接。 但是，当我将鼠标悬停在“过滤器”菜单上时，它会显示下拉菜单，我可以在下拉菜单中移动鼠标，但当我单击“选择”框将其打开，并将鼠标移到“选择和选项”中时，整个下拉菜单将消失。这就好像选择框实际上并不包含在UL下拉列表中

---

有人知道如何不用JS解决这个问题吗？另外，我认为在IE8中声明这一点很重要。我不知道它在其他浏览器中是如何工作的，因为它只是为支持IE8而设计的。（不要问，说来话长）。

是的，这确实是因为

的下拉部分在文档之外（它是一个UI元素）

---

如果可以，请考虑使用<代码> <代码>，以<代码> n<代码>为合适的数字。这会将您的下拉列表更改为更“选项列表”类型的元素，但它将与

：hover

兼容。请尝试在JSFIDLE或其他内容中重现问题，或为我们提供一个可以查看特定行为的链接。我编辑并添加了，需要在IE8中查看才能复制相同的环境。感谢您回答我的问题。设置大小不适合我，因此我必须干扰一些JS。没什么大不了的，但我希望用纯CSS来实现。再次感谢你，伙计：）

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

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