Html 当下拉打开以选择项目时，li菜单隐藏在后面

当打开下拉列表选择一个项目，同时将鼠标悬停在下拉列表的子菜单隐藏在dropdownlist后面。下面是示例代码。请参考附件中的图片以了解问题

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#ddd；}
.dropdown:hover.dropdown内容{display:block；}
.dropdown:hover.dropbtn{背景色：#3e8e41；}
悬停式下拉菜单
将鼠标移到按钮上可打开下拉菜单

下拉列表


测试文档1测试文档1测试文档1

将此添加到您的样式中：

.dropdown:hover ~ select:focus{
      display:none;    
}

---

如果我理解正确，您需要确保下拉列表位于下拉列表上方。您可以通过向.dropbox内容添加z索引来完成此操作，如下所示：

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;  <--- Added
}

。下拉式内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z-index:999；这是否回答了您的问题？