如何使展开的部分与其他部分达到相同的高度？

Question

我正在尝试制作一个 html css 页面，侧面有一个扩展的项目列表。我需要扩展部分也与 Figma 设计图像具有相同的垂直位置

        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: rgba(0, 0, 0,0.6);
            border-radius: 10px;
        }
        #sidebar ul {
            position: relative;
            list-style-type: none;
        }
        #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: 165px;
            width: 200px;
            top: 0;
            display: none;
            background: whitesmoke;
            box-shadow: 3px 3px 10px rgba(0, 0,0, 0.1);
            border-radius: 20px;
        }
        #sidebar ul .dropdw {
            position: relative;
        }
        #sidebar ul .dropdw:hover ul {
            display: initial;
        }

<div class="navbar">
    <div class="contactLine">
        <h5>Call us for web and orders: 076 4881254</h5>
        <h5>Email: [email protected]</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>

我希望扩展元素也与第一级元素（Al，Ol）位于相同的垂直位置，如我所示的第二张图片

这是我创建的figma设计

Answer 1

您应该删除

position: relative;

中的

<li>

。让它在父级中

<ul>

。并将

min-height: auto;

添加到子项

<ul>

。
你的代码很脏，所以我几乎没有修复任何东西：

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: rgba(0, 0, 0,0.6);
            border-radius: 10px;
        }
        #sidebar ul {
            position: relative;
            list-style-type: none;
            margin: 0;
            padding: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;
            min-height:100%;
        }
        #sidebar ul .dropdw {
            /* position: relative; */
        }
        #sidebar ul .dropdw:hover ul {
            display: initial;
        }

<div class="navbar">
    <div class="contactLine">
        <h5>Call us for web and orders: 076 4881254</h5>
        <h5>Email: [email protected]</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>