导航菜单未正确下拉答案

【问题标题】：Nav Menu Not Dropping Down Correctly导航菜单未正确下拉
【发布时间】：2015-01-16 08:58:31
【问题描述】：

我正在开发一个网站，我需要获取顶部菜单来创建下拉菜单。我已经将这些元素挂在网站上，但我已将 display:none 放在 ul 中以获取我需要的列表项（在服务链接下找到）。如果您将其删除，则将鼠标悬停在“服务”链接上时将显示下拉菜单。发生这种情况时，当我需要下拉菜单时，我会通过下拉列表将菜单推到一边。有什么建议么？我正在为 4 个样式表之间的网站模板与本机 CSS 作斗争，但我已经无计可施了。

谢谢！

编辑：我已将其范围缩小到导致问题的 CSS 样式表。我很确定它是此时的主要样式表（style.css）。

【问题讨论】：

尝试将下拉列表的position: 更改为absolute。
到目前为止没有运气。我可以看到导航区域的 HTML 文档中没有列出下拉类，所以这可以解释为什么它不能修复它。
好吧，因为它使用引导程序，您可以在导航中嵌入下拉菜单。 Bootstrap Nav

标签： html css drop-down-menu

【解决方案1】：

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

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

<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。 Position absolute 会将其从文档流中删除，这样当您显示它时它不会影响您的其余导航项：

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

【讨论】：