HTML/CSS 下拉菜单位置

Question

我在使用 HTML 和 CSS 创建下拉菜单时遇到问题。我把 HTML 部分记下来了（我想）。

<div id="Nav">
    <ul>
        <li class="Navigation"><a href="" class="Nav_Text">Item 1</a></li>
        <li class="Navigation"><a href="" class="Nav_Text">Item 2</a></li>
        <li class="Navigation"><a href="" class="Nav_Text">Item 3</a></li>
        <li class="Navigation">
            <a class="Nav_Text">Item 4</a>
            <ul class="sub-menu">
                <li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item1</a></li>
                <li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item2</a></li>
            </ul>
        </li>
    </ul>
</div>

这是我为 CSS 准备的内容

.submenu
{
    display: none;
}

#Nav ul li:hover > ul
{
    display: block;
    position: absolute;
    /*The rest of the code is just for looks and doesn't effect the position*/
}

我遇到的问题是下拉菜单没有显示在第 4 项下方，而是显示在屏幕的最左侧。谁能帮我将下拉菜单定位在第 4 项下方？而不是通过设置边距。我试过了，当屏幕调整大小时，下拉菜单没有对齐。

提前谢谢你。

Answer 1

尝试给class="sub-menu" position:relative

.sub-menu{
    position:relative;
}

不确定它会起作用:)

没试过。

Answer 2

当你使用时

位置：绝对；

在子列表中的子元素上，您必须将父 li 设置为

位置：相对；

#Nav > ul > li{
  position: relative;
}