导航菜单未正确下拉

Question

我在网站上工作，我需要获取顶部菜单以创建下拉菜单。我已经在站点中放置了这些元素，但我已将 display:none 放入我需要的列表项的 ul 中（在服务 link 下找到）。如果删除它，将鼠标悬停在服务 link 上时将显示下拉菜单。当发生这种情况时，当我需要下拉菜单时，我会使用下拉列表将菜单推到一边。有什么建议么？我在 4 个样式表之间与本机 CSS 争夺网站模板，我已经无计可施了。

谢谢！

编辑：我已将范围缩小到 CSS 样式表导致问题的原因。我很确定这是此时的主要样式表 (style.css)。

Answer 1

因此，在您的情况下，解释如何执行此操作会更容易，而不是尝试将您的网站分开并查看问题所在（快速通知是：ul 未定位并且似乎没有悬停动作来显示它）。

这是重建的结构（class 名称不同等，但格式相同）：

<nav>
  <ul>
    <li class="link">
        <a href="#">Hover over Me</a>
        <ul class="subnav">
            <li>subnav 1</li>
            <li>subnav 1</li>
            <li>subnav 1</li>
        </ul>
    </li>
 </ul>
</nav>

您需要做的是设置子导航包装器的样式，即 ul。您需要将其设置为 position: absolute 和 display: none。绝对位置会将其从文档流中移除，这样当您显示它时它就不会影响您的其余导航项：

ul.subnav{
   display: none;
   position: absolute;
   background: blue;
   color: #FFF;
}

但是 absolute 图像本质上是相对于文档的，因此要包含此子导航，您需要将其父级（li）设置为 position: relative，以便它包含这个元素：

li.link{
   position: relative;
}

最后，您可以在父级的 :hover 状态下显示隐藏菜单：

.link:hover .subnav{
   display:block;
}

FIDDLE

导航菜单未正确下拉

Nav Menu Not Dropping Down Correctly

html

css

drop-down-menu