如何让侧边栏展开的子菜单与父菜单保持同一垂直位置？

问题分析 #

当前子菜单垂直位置偏移的核心原因：

• 未清除列表(ul)的默认内边距和外边距，导致菜单整体位置偏移；
• 子菜单水平定位使用固定像素值，且未确保与父级菜单的顶部对齐逻辑准确。

修改后的完整代码 #

CSS代码

body {
    margin: 0;
    padding: 0;
}
/* Navbar styles */
.navbar {
    display: flex;
    flex-direction: column;
    background-color: #6BA1FF;
    margin-top: 0;
    padding: 0;
}
.contactLine, .logoLine {
    display: flex;
    margin: 0;
}
.contactLine h5 {
    margin-right: 20px;
}
.logoLine img {
    margin: 0;
    margin-bottom: 2px;
}
#logo{
    width: 160px;
    height: 50px;
}
#searchBar {
    width: 350px;
    height: 40px;
    margin-left: 20px;
    border-radius: 15px;
    border: none;
}
#searchButton{
    width: 50px;
    height: 42px;
    border: none;
    background-color: #274E91;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
    top: 4px;
    right: 54px;
    z-index: 999;
}
.search{
    position: relative;
    left: 280px;
}
#loginRegBtn{
    background-color: #6BA1FF;
    border: none;
    position: relative;
    left: 350px;
    font-size: x-large;
}

/* Sidebar styles */
#sidebar {
    width: 200px;
    position: absolute;
    top: 102px;
    background-color: whitesmoke;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 0;
}
#sidebar ul {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#sidebar ul li a {
    display: flex;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.00em;
    text-transform: capitalize;
    color: #757576;
    text-decoration: none;
    padding: 10px 30px;
    height: 30px;
    transition: 0.1s ease;
}
#sidebar ul li a:hover {
    background:#757576;
    color: rgb(56, 141, 251);
}
#sidebar ul ul {
    position: absolute;
    left: 100%;
    width: 200px;
    top: 0;
    display: none;
    background: whitesmoke;
    box-shadow: 3px 3px 10px rgba(0, 0,0, 0.1);
    border-radius: 20px;
    padding: 0;
    margin: 0;
}
#sidebar ul .dropdw {
    position: relative;
}
#sidebar ul .dropdw:hover ul {
    display: initial;
}

HTML代码（无需修改）

<div class="navbar">
    <div class="contactLine">
        <h5>Call us for web and orders: 076 4881254</h5>
        <h5>Email: bt@bt.com</h5>
    </div>
    <div class="logoLine">
        <img src="logo.png" alt="logo" id="logo">
        <div class="search">
            <input type="text" placeholder="Search...." id="searchBar">
            <button id="searchButton"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 50 50"
                                           style="fill:#FFFFFF;">
                <path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"></path>
            </svg></button>
            <button id="loginRegBtn" ><i>login/register</i></button>
        </div>
    </div>
</div>
<div id="sidebar">
    <nav >
        <ul>
            <li class="dropdw"><a href="">A/L Division</a>
                <ul>
                    <li><a href="">Science/Maths Stream</a></li>
                    <li><a href="">Commerce Stream</a></li>
                    <li><a href="">Art Stream</a></li>
                    <li><a href="">Technology Stream</a></li>
                    <li><a href="">Common Stream</a></li>
                </ul>
            </li>
            <li class="dropdw"><a href="">O/L Division</a>
                <ul>
                    <li><a href="">Grade 10</a></li>
                    <li><a href="">Grade 11</a></li>
                    <li><a href="">O/L Exam</a></li>
                </ul>
            </li>
            <li class="dropdw"><a href="">Intermediate Division</a>
                <ul>
                    <li><a href="">Grade 9</a></li>
                    <li><a href="">Grade 8</a></li>
                    <li><a href="">Grade 7</a></li>
                    <li><a href="">Grade 6</a></li>
                </ul>
            </li>
            <li class="dropdw"><a href="">Primary Division</a>
                <ul>
                    <li><a href="">Grade 1/2</a></li>
                    <li><a href="">Grade 3/4/5</a></li>
                    <li><a href="">Scholarship Exam</a></li>
                </ul>
            </li>
            <li class="dropdw"><a href="">Common Division</a>
                <ul>
                    <li><a href="">Entertainment</a></li>
                    <li><a href="">General Knowledge</a></li>
                    <li><a href="">Excercise Book</a></li>
                    <li><a href="">Other Books</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

关键修改说明 #

1. 清除列表默认边距：给#sidebar ul和#sidebar ul ul添加padding: 0; margin: 0;，消除浏览器默认的列表内边距和外边距，避免菜单位置偏移。
2. 子菜单水平定位优化：将子菜单的left: 165px改为left: 100%，确保子菜单始终紧贴父级菜单右侧，适配父级宽度变化。
3. 保持垂直对齐：保留子菜单的top: 0，结合父级li.dropdw的相对定位，让子菜单顶部与父级菜单项顶部完全对齐，符合设计要求。
4. 修正侧边栏阴影：完善box-shadow参数，使其正常显示阴影效果。

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