Responsive website nav menu dropdown not function as intended

Question

I'm pretty new to this so the solution might be obvious but I have no idea, also yes my code is a mess.

I'm trying to make it so my nav is replaced with a button at max-width:768px that when pressed it reveals a menu from the side containing the nav elements. I also have 2 dropdown menus that works as they are supposed to normally however at max-width:768, when nav disappears and becomes a menu I wanted to make them always visible instead of on hover. I made it work but they do not look like they are supposed to. They overlap all the elements.Here's an image to make the issue clearer.

<nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <label class="logo"><img id="logo" class="w3-left" src="images/3.png" /></label>
        <ul>
            <li><a href="homepage.php">Homepage</a></li>
            <li><a href="" class="dropbtn">Services</a>
            <ul class="dropdown-menu-s">
                <li><a href="photodatabase.html">Photo Database</a></li>
                <li><a href="sitesurveydatabase.html">Survey Database</a></li>
                <li><a href="3dmodeldatabase.html">3D Model Database</a></li>
                <li><a href="calendar.html">Planner</a></li>
                <li><a href="ticketting.html">Support</a></li>
                <li><a href="dcatalogue.html">Catalogue</a></li>
            </ul>
            </li>
            <li><a href="contactus.html">Contact Us</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href=""><img id="settings" src="images/settings.png"></a>
            <ul class="dropdown-menu">
                <li><a href="logout.php">Sign out</a></li>
                <li><a href="changepassword.php">Change password</a></li>
            </ul>
            </li>
        </ul>
    </nav>

nav {
    height: 80px;
    width: 100%;
    position: relative;
}

nav ul {
    float: right;
    margin-right: 20px;

}

nav ul li {
    display: inline-block;
    position: relative;
    line-height: 80px;
    margin: 0 5px;
}

nav ul li a {
    color: black;
    font-size: 18px;
    padding: 7px 13px;
}

nav ul li a.active,
nav ul li a:hover {
    transition: 0.5s;
    font-size: 17px;
}

nav ul li:hover ul.dropdown-menu {
    display: block;
  }
  
  nav ul li ul.dropdown-menu {
    top: 100%;
    left: -50%;
    display: none;
    padding: 0;
    margin: 0;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    min-width: 120px;
    z-index: 2;
    position: absolute;
  }
  
  nav ul li ul.dropdown-menu li {
    display: block;
    padding: 10px 0px;
  }
  
  nav ul li ul.dropdown-menu li a {
    color: #333;
    font-size: 12px;
    outline: none;
    line-height: 22px;
  }
  
  nav ul li ul.dropdown-menu li a:hover {
    background-color: #ddd;
  }

  nav ul li:hover ul.dropdown-menu-s {
    display: block;
  }
  
  nav ul li ul.dropdown-menu-s {
    top: 100%;
    left: -80%;
    display: none;
    padding: 0;
    margin: 0;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    min-width: 250px;
    z-index: 2;
    position: absolute;
  }
  
  nav ul li ul.dropdown-menu-s li {
    display: block;
    padding: 10px 15px;
  }
  
  nav ul li ul.dropdown-menu-s li a {
    color: #333;
    font-size: 14px;
    outline: none;
    line-height: 30px;
  }
  
  nav ul li ul.dropdown-menu-s li a:hover {
    background-color: #ddd;
  }

.checkbtn {
    font-size: 30px;
    color: black;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}

#check {
    display: none;
}

@media (max-width: 768px) {
    .checkbtn {
        display: block;
        margin-top: 3%;
    }

    ul {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #1a5e5f;
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .5s;
        overflow-y: auto;
    }

    nav ul li {
        display: block;
        margin: 50px 0;
    }

    
    nav ul li a {
        font-size: 20px;
        display: block;
        padding: 10px;
        color: #fff;
        text-decoration: none;
    }

    nav ul li ul.dropdown-menu {
        display: block;
        background-color: transparent;
        border: none;
        left: 40%;
        width: 20%;
    }


    nav ul li ul.dropdown-menu-s {
        display: block;
        background-color: transparent;
        border: none;
        left: 33%;
        width: 10%;
    }

    nav ul li ul.dropdown-menu li a:hover {
        background-color: #1a5e5f;
      }
    nav ul li ul.dropdown-menu-s li a:hover {
        background-color: #1a5e5f;
      }

    a:hover,
    a.active {
        background: none;
        color: whitesmoke;
    }

    #check:checked ~ ul {
        left: 0;
    }

    #settings {
        width: 5%;
        height: auto;
    }
}

Instead of overlapping, they should be pushed down. When the button is clicked and the menu opens up with nav elements it should look like;

Homepage Services 6 elements of the dropdown-menu-s in a column Contact Us About Us Settings icon 2 elements of the dropdown-menu is a column

I have no idea to fix this and believe me I tried. Like I mentioned I'm really new to this so your help would be apricated.

Answer 1

You need to have your parent element class="dropbtn". Move the class to the <li></li>

<li class="dropbtn"><a href="">Services</a>
<ul class="dropdown-menu-s">
    <li><a href="photodatabase.html">Photo Database</a></li>
    <li><a href="sitesurveydatabase.html">Survey Database</a></li>
    <li><a href="3dmodeldatabase.html">3D Model Database</a></li>
    <li><a href="calendar.html">Planner</a></li>
    <li><a href="ticketting.html">Support</a></li>
    <li><a href="dcatalogue.html">Catalogue</a></li>
 </ul>

Change the dropbtn position to relative The other step is to set dropdown-menu-s position to relative. For the other parts you need to target the correct elements without the children or overwrite their atributes with correct class because it will still have top: 80px and all the other stuff attached to it.

Hope this help :)