javascripthtmlcssfrontendsidebar

how to make the expanded part come to the same height of the others?


I m trying to make a html css page with a expanding item list on side. I need expanded part also to be equally same verticle position as the figma design image

enter image description here

        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: 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>

I expect to get expanding elements also to be on same verticle position as first level of elements (Al ,Ol), As the second image i shown

here is the figma design i created


Solution

  • You should remove position: relative; in <li>. Let it be in the parent <ul>. And add min-height: auto; to the child <ul>.
    Your code is pretty dirty, so I fixed almost nothing:

    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: 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>