Question

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

谢谢！

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

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

你需要做的是为subnav的包装器设置样式，即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

导航菜单没有正确删除

1 个答案: