导航菜单下拉框定位异常求助：未与hover菜单项对齐

问题分析 #

当前下拉菜单设置position: absolute; left: 100%; top: 0;后，会固定在页面顶部而非hover菜单项的右侧，核心原因是：绝对定位元素的定位基准是最近的非static定位父元素，原代码中包含下拉菜单的<li>元素默认是position: static，导致下拉菜单向上寻找已定位的上层容器（如.under）作为基准，从而出现偏移。

解决方案 #

给所有包含下拉菜单的父级<li>元素添加position: relative;，让下拉菜单以当前hover的菜单项为定位基准。设置后，left:100%会指向该菜单项的右侧，top:0会和菜单项顶部对齐，正好满足需求。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dropdown Menu</title>
    <style>
        body {
            margin: 0;
        }
        .menu {
            width: fit-content;
            float: left;
        }
        .under {
            width: 100px;
            float: left;
            background-color: #242a38;
            position: absolute;
            z-index: 1;
        }
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        /* 关键修改：给父li添加相对定位，作为下拉菜单的定位基准 */
        nav ul li {
            position: relative;
        }
        nav ul li.border {
            text-align: center;
            border-bottom: 1px solid white;
            margin: 5px 5px;
        }
        nav ul li a {
            color: #ffffff;
            text-decoration: none;
            font-family: Candara;
            font-size: 14px;
            display: block;
            padding: 10px;
            margin: 5px 0px;
            z-index: 10;
        }
        nav ul li a:hover {
            background-color: #4e596f;
            transition: 1s;
        }
        .hello {
            float: left;
        }
        .text {
            position: absolute;
            left: 700px;
            top: 145px;
            font-family: segoe script;
            color: #ffffffc4;
            text-decoration: #1eacc5 underline;
            font-size: 50px;
            transform: rotate(1.5deg)
        }
        #full-span {
            width: 100%;
            height: 100%;
            position: fixed;
        }
        .stretch {
            width: 100%;
            height: 100%;
        }
        nav ul ul{
            width: 100%;
            background: #242a38;
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
            z-index: 999;
        }
        ul li:hover > ul{
            display: block;
        }
        ul ul li {
            display: block;
        }
        nav ul ul a{
            padding: 10px 5px;
            margin: 5px 5px 11px 10px;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="under">
            <nav>
                <ul>
                    <li class="border"><a href="#">Home</a></li>
                    <li class="border"><a href="#">About</a></li>
                    <li class="border"><a href="#">Services</a></li>
                    <li class="border"><a href="#">Contact</a>
                        <ul>
                            <li><a href="#">Local 1</a>
                            <ul>
                                <li><a href="#">Okkk</a></li>
                                <li><a href="#">Not Ok</a></li>
                                <li><a href="#">Yes Ok</a></li>
                            </ul>
                            </li>
                            <li><a href="#">Local</a></li>
                            <li><a href="#">Local</a>
                            <ul>
                                    <li><a href="#">Okkk</a></li>
                                    <li><a href="#">Not Ok</a></li>
                                    <li><a href="#">Yes Ok</a></li>
                                </ul>
                                </li>
                        </ul>
                    </li>
                    <li class="border"><a href="#">Sign in</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>

补充说明 #

• 添加nav ul li { position: relative; }后，所有一级、二级li元素都会成为相对定位容器，内部的绝对定位下拉菜单会以自身为基准定位，多级下拉也能保持正常对齐。
• 原代码中.under的position: absolute可保留，不影响菜单整体布局。

内容的提问来源于stack exchange，提问作者Ali Naqi