Javascript 单击时的下拉菜单'；它不是完全可见的

我现在正在制作一个带有简单移动菜单的定制网站

在主页上，一切正常。在其他页面中，我对菜单的操作进行了一些修改。单击“收藏”下拉菜单时，它将保留在内容下

我试图使用不同的第三方菜单，但问题仍然存在

<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>

---

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

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

---

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

下拉内容的内容受.page header高度的限制，并且不会通过增加.dropdown内容的z索引来修复

因此，在开发工具中，我将.page标题的高度从25vh增加到30vh，它显示了.dropdown内容的内容，因此您可能需要这样做

.page-header {
  height: 30vh;
}

---

标题

元素具有固定高度，并且

溢出

属性设置为

隐藏

。因此，任何超出元素边界的内容都将被裁剪掉

您可以通过以下方式解决此问题：

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 */
}

---

在您提供的链接中，菜单可见。我看不出这是什么问题。如果没有一点演示，很难给出可靠的建议，但仅仅是猜测一下，听起来下拉菜单可以使用更大的

z-index

。还有@VincentChinner说的话。该链接在显示时显示所有内容顶部的菜单用于主页到

js--main nav

，但对于其他页面不能。Hii@VincentChinner问题是，当您进入集合页面时，您在菜单中传递鼠标悬停集合，并且只有下拉菜单的一部分是可见的，可能您的浏览器中有样式表的缓存版本。尝试在另一个浏览器中查看，看看是否仍然存在相同的问题。您还可以清除浏览器的本地数据。@CarloVarchetta可以随意选择此作为答案，以便人们知道它在将来起作用：）