How to create a drop down menu in a ready made template

[Schmueller23]

hi guys i am trying to modify a navigation bar of a ready-made template to display a drop down menu but what I got is the below:

Them menu is not aligned with the other menu in the navigation bare and when I click the investment menu, the sub menu appears squished within the menu and not like a drop down, below in the comments is what my design looks like when I click on the menu .

how do I fix this? below is the particular HTML element I am trying to edit

ul class="nav">
                      <li><a href="index.html" class="active">Home</a></li>
                      <li><a href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/About%20us.html">About Us</a></li>
                      <li class="dropdown"><input type="checkbox" id="dropdownToggle1">
                        <label for="dropdownToggle1">Investments</label>
                        <div class="dropdown-content">
                          <a href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/stock%20investment.html">Stock investment</a>
                          <a href="#">Real Estate</a>
                        </div>
                      </li>  
                      <li><a href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/Application%20page%201.html">Apply</a></li>
                      <li><a href="property-details.html">Property Details</a></li>
                      <li><a href="contact.html">Contact Us</a></li>
                      <li><a href="#"><i class="fa fa-calendar"></i> Schedule a visit</a></li>
                  </ul>   
                    <a class='menu-trigger'>
                        <span>Menu</span>
                    </a>

this is the particular CSS for the dropdown I am trying to edit below

dropdown {
  position: relative; 
}

  .dropdown input [type="checkbox"] {
    opacity: 0;
    pointer-events: none;
  }

  .dropdown label {
    display: block;
    padding: 10px;
  }

  .dropdown-content {
    position: absolute;
    top: 100%; 
    left: 0;
    background-color: #fff;
    box-sizing: border-box;
    border: 1px solid #ccc;
    display: none;
  }

  .dropdown input[type="checkbox"]:checked ~ .dropdown-content {
    display: block;
  }

  .dropdown-content a {
    display: block;
    padding: 10px;
    text-decoration: none;
  }

  .dropdown-content a:hover {
    background-color: #ddd;

below is my Java script for that element:

function toggleDropdown(element) {
  const elements = document.getElementsByClassName("dropdownToggle1");
  dropdownContent.classList.toggle("show");
}

if you want the full code it is on js fiddle: https://jsfiddle.net/p1x87we9/latest/

[Schmueller23]

this what my current navigation looks like when i click on the menu, the sub-menus are squished within the main menu as shown by the image below