HTML codes

<div class="navBar">
        <div>
            <img class="navLogo" src="./img/logo.png" alt="">
        </div>
        <a href="index.html">Home</a>
            <div class="dropdown">
                <a href="#">Products</a>
                <div class="dropdownList">
                    <a href="Tshirt.html">Tshirt</a>
                    <a href="Pants.html">Pants</a>
                    <a href="Hoodie.html">Hoodie</a>
                </div>
            </div>
        

        <a href="Info.html">Info</a>
        <a onclick="opencard()">Payment</a>
        
    </div>

CSS codes

.navBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10rem;
    background-color: #000000;
    color: white;
    position: relative;
}

.navBar a {
    display: block;
    text-decoration: none;
    color: lightgray;
    cursor: default;
    font-weight: 600;
    font-size: 18px;
    padding: 30px 50px;
}

.navBar a:hover {
    background-color: #2b2a2a;
}


.navLogo {

    height: 4rem;
    width: 4rem;
    border-radius: 50%;
}


.dropdown {
    top: 0;

}

.dropdownList {
    display: none;
    position: absolute;
    background-color: #383838;
    min-width: 10rem;

}


.dropdownList a {
    color: rgb(201, 201, 201);
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: block;
}

.dropdownList a:hover {

    background-color: #4d4242;



}

.dropdown:hover .dropdownList {
    display: block;
}

I just started coding and tring to make a e-commerce website but having trouble with responsive web design. i did another ones responsive with no problem but i couldn’t figure out how to do this one.
I tried to make it responsive (i don’t have the cords bc i revert it back to normal after it didnt work ) but they were not properly lined and the products dropdown was showing over the other buttons i want it to be under