Question

我正在研究我的投资组合，我在导航栏上工作时偶然发现了一个问题。我试图隐藏下拉菜单并使其显示在悬停状态，但它没有显示出来。我也试图将下拉菜单置于其父Portfolio的中心，但我无法弄清楚如何这样做，所以我只是使用填充这是一种非常糟糕的方法。

这是代码的一部分，我认为我做错了什么，还有一个小提琴。

nav ul li:hover ul {
    height: auto;
    overflow: auto;
}

JSFiddle

Answer 1

在您的HTML中，嵌套的<ul>需要位于结束</li>

内

<li>
    <a href="">Portfolio</a>
    <ul>
        <li><a href="">Experimental</a></li>
        <li><a href="">Motion Graphics</a></li>
        <li><a href="">Graphic Design</a></li>
        <li><a href="">Web Design</a></li>
    </ul>
</li>

您可以通过将父菜单项设置为已有的position: relative;来将子菜单相对于其父级定位，并将这些样式添加到子菜单中，将顶部和左侧值更改为您的要求：

position: absolute;
top: 0;
left: 0;

我已更新您的小提琴here

下拉菜单不会出现

1 个答案: