dropdown nav bar on click:

}
    .linkcontainer{
    width:25%;
    position:relative;
    float:left;
    height:100%;
    border-right:2px black solid;
    box-sizing: border-box;
    }

.link{
    cursor: pointer;
    width: 100%;
    border: none;
    outline: none;
    background: none;
    font-size: 20px;
    height:100%;
    }   
        .link:hover{
        background-color: grey;
         }
    .dropdowncontainer{
    width: 70%;
    border-bottom: 2px black solid;
    background-color: white;
    height:25px;
    }
        .dropdowncontainer:hover{
        background-color: rgb(175, 173, 173);
          
        }
    .dropdown {
    display: none;
    overflow: hidden;
    width:80px;
    }

</style>
<div class="nav">
    <div class="linkcontainer">
    <div class="link">
        <button class="link">nav1</button>
    </div>
        <div class="dropdown">
            <div class="dropdowncontainer">
            <a href="">link1</a> 
            </div>
            <div class="dropdowncontainer">
            <a href="">link2</a>
            </div>
            <div class="dropdowncontainer">
            <a href="">link3</a>
            </div>
        </div>
    </div>    
    
    <div class="linkcontainer">
    <div class="link">
        <button class="link">nav2</button>
    </div>
        <div class="dropdown">
            <div class="dropdowncontainer">
            <a href="">link1</a> 
            </div>
            <div class="dropdowncontainer">
            <a href="">link2</a>
            </div>
            <div class="dropdowncontainer">
            <a href="">link3</a>
            </div>
        </div>
    </div>

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdown = this.nextElementSibling;
    if (dropdown.style.display === "contents") {
      dropdown.style.display = "none";
    } else {
      dropdown.style.display = "contents";
    }
  });
}

</script>