Question

我正在为具有相当大标题的网站的下拉菜单工作。标题内部是一个包含主菜单的<ul>，每个菜单项都显示一个下拉列表。我遇到的问题是主菜单比标题短，因此光标必须经过一个小空间，它不会悬停在主菜单或下拉列表上。在这个简短的空间中，下拉菜单消失。我该如何防止这种情况发生？我无法移动下拉列表，或者它与标题重叠。我也无法以有效的方式更改<ul>的高度。

该网站是私有的，但我创建了一个显示我遇到的问题的jsfiddle：https://jsfiddle.net/x0hvdaqn/

修改为了简单起见，我用div而不是ul制作小提琴，但是当我把它改成ul时它就开始工作了。我正在构建的实际菜单以相同的方式生成，但不起作用。为什么会这样呢？

新的小提琴而不是div：https://jsfiddle.net/tgqof8my/

Answer 1

使用此代码。我希望，你需要在drop中减少你的保证金。使用这个......

#wrapper {
  width: 100%;
  height: 75px;
  background-color: green;
  text-align: center;
}
#button {
  height: 40px;
  width: 25%;
  margin: auto;
  background-color: yellow;
  top: 25px;
  position: absolute;
}
#drop {
  display: none;
  background-color: red;
  margin-top: 20px;
}
#button:hover #drop {
  display: block;
}

<div id="wrapper">
  <div id="button">
  Primary Menu Item
    <div id="drop">
    Dropdown
    </div>
  </div>
  Header
</div>

从主菜单移动光标时，下拉菜单消失

1 个答案: