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

当您使用

位置：绝对；

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

位置：相对；

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

Answer 2

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

.sub-menu{
    position:relative;
}

不确定它是否有效:)

没试过。

HTML/CSS 下拉菜单位置

HTML/CSS Drop-down Menu Location

html

css

web

drop-down-menu