單擊下拉菜單時，它並不完全可見

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。 我還猜測您正在使用基於類名的框架。

將此信息添加到您的問題中以獲得有效的答復。