Question

我现在正在使用简单的移动菜单创建自定义网站。

在首页上都可以。在其他页面中，我进行了一些修改，这些修改会损害菜单的操作。单击集合下拉菜单后，它仍保留在内容下。

我正在尝试使用其他第三方菜单，但问题仍然存在。

<ul class="main-nav page-nav">
  <li><a href="../index.html">Home</a></li>
  <li><a href="#">Bio</a></li>
  <li>
    <div class="dropdown">
      <button class="dropbtn"><a href="collection.html">Collection</a></button>
      <div class="dropdown-content">
        <a href="#">Human</a>
        <a href="#">Dog</a>
        <a href="#">Accessories</a>
      </div>
    </div>
  </li>
  <li><a href="#">Social Wall</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

当我通过鼠标悬停集合时，我需要使内容菜单完全可见。

Answer 1

.dropdown-content的内容受.page-header高度的限制，并且不能通过增加.dropdown-content的z-index来固定。

因此，通过开发工具，我将.page-header的高度从25vh增加到30vh，并显示了.dropdown-content的内容，所以您可能想要这样做

.page-header {
  height: 30vh;
}

Answer 2

您的header元素具有固定的高度，并且overflow属性设置为hidden。因此，超出元素范围的所有内容都会被裁剪掉。

您可以通过以下任一方法解决此问题：

header{
    overflow: hidden; /* removing this */
}

或固定下拉菜单内容：

.dropdown-content{
    position: fixed; /* (i'd suggest this one) as you may need to have
                     no overflow on your header element */
}

Answer 3

我建议您也添加CSS。我还猜测您正在使用基于类名的框架。

将此信息添加到您的问题中以获得有效的答复。

单击下拉菜单时，它并不完全可见

3 个答案: