html - 导航菜单未正确下拉

Question

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

谢谢!

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

Answer 1

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

这是重建的结构(类名不同等，但格式相同):

<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)设置为 位置: relative 以便它包含此元素:

li.link{
   position: relative;
}

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

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

FIDDLE