css - 当 div 使用 margin:auto; 居中时，如何定位下拉导航菜单？

Question

我通过在#nav div 中浮动三个div 来设置导航菜单的基础知识，该div 使用margin:auto; 居中。

这些导航菜单选项中只有一个需要下拉菜单。我假设我必须使下拉菜单脱离正常流程，这样它就不会移动其他浮动对象。

这是我的第一个项目，所以我只是想从概念上了解如何定位这个菜单。恐怕如果我做一个与像素值相关的位置，菜单可能不会显示在原始链接下，具体取决于用户的屏幕尺寸/分辨率。

红色 X 标记下拉菜单应出现的位置。

这个无序列表应该嵌套在投资组合列表项下，还是应该是一个单独的无序列表，以某种方式定位在投资组合链接下？恐怕如果它是嵌套的，它可能会将底部边框撞倒？

我可以发布代码，但我不知道从哪里开始。寻找正确方向的推动力！

谢谢

Answer 1

这通常是这样完成的：

<ul class=menu id=leftLinks>
    <li>about</li>
    <li>portfolio
        <ul class=submenu>
            <li>Submenu item</li>
        </ul>
</li>
</ul>


.menu > li {
    position: relative;
}

.submenu {
    position: absolute;
    left: 0;
    top: 100%;
}