Question

我创建了自定义下拉菜单，其中一个<div>持有当前值并充当<select>字段，另一个下方显示最后一个字段时显示的字段，持有所有<option>值。

设计要求底部<div>稍微低于上面的一个（奇怪的圆角等），所以我使用z-index来实现这一点。这一切都有效，直到我有两个相互靠近的下拉菜单。如果单击上面的一个，则会显示下拉选项列表，但它也会低于第二个下拉菜单，这是非常不受欢迎的。以下是jsfiddle中的简化版本： jsFiddle

如您所见，第一个下拉菜单很好，但第二个隐藏在第三个下方。任何想法如何实现这一点，所以第二个菜单也可以工作？可能不会以某种方式使用z-index？

Answer 1

首先，将每个菜单包装在一个元素中。我使用了div.container。

由于一次只能打开一个菜单，只需更改每个容器中z-index和.major元素的.minor（在我的示例中悬停）即可正常工作：

.major {
  position: relative;
  width: 100px;
  background-color: red;
  z-index: 1;
}
.minor {
  position: absolute;
  width: 150px;
  background-color: blue;
  padding-top: 10px;
  margin-top: -10px;
  z-index: 0;
  display: none;
}
.container:hover .major {
  z-index: 5;
}
.container:hover .minor {
  display: block;
  z-index: 4;
}
.moveup {
  margin-top: -25px;
}

<div class="container">
  <div class="major">
    First one fine
  </div>
  <div class="minor">
    Option part goes here Option part goes here Option part goes here
  </div>
</div>
<br />
<br />
<br />
<br />
<div class="container">
  <div class="major">
    Second menu
  </div>
  <div class="minor">
    Option part goes here Option part goes here Option part goes here
  </div>
</div>
<div class="container">
  <div class="major">
    Third menu
  </div>
  <div class="minor">
    Option part goes here Option part goes here Option part goes here
  </div>
</div>

Answer 2

我不是100％肯定你的意思，但如果我没有错，解决办法应该是包装.major和.minor div，这样他们就不会相互重叠，像这样：

<div class="dropdown">
  <div class="major">
  First one fine
  </div>
  <div class="minor">
  Option part goes here
  Option part goes here
  Option part goes here
  </div>
</div>

请参阅我的JSFiddle的分支：https://jsfiddle.net/jk1dn4yx/

在不使用z-index的情况下在另一个上显示div

2 个答案: