html - How to make the last element in the nav display as a link

Question

in my navbar the first three li elements are displayed as a links but the last one is not? I really cant find where is the problem this the html code :

<ul class="navMenu" id="navMenuId">
      
    <li class="main_links1"><a href="x" class="main_links1">Home</a></li>
    <li class="main_links2"><a href="x" class="main_links2">About</a></li>
    <li class="main_links3"><a href="x" class="main_links3">Contact us</a></li>
  
   <li class="main_links4"> <div class="dropdown">
    
   <a href="#" class="dropbtn">Universities</a></li>
   
      
      <div class="dropdown-content">
        <a href="x" class="drop1">Lebanese University</a>
        <a href="x" class="drop2">American University of Beirut</a>
        <a href="x" class="drop3">Lebanese American University</a>
        <a href="x" class="drop4">Université Saint-Joseph de Beyrouth</a>
        
      </div>
    
    </div>
    <a class="icon" href="javascript:void(0);" onclick="openMenu()">&#9776;</a>
    
  </ul>`

the css is here because its a bit big: https://pastebin.com/0BxnshVw

any idea on how to fix it. I have tried several things but none worked

Answer 1

You should not have div's and a's directly under an ul element. you should probably move the last closing </li> to the end of the block:

<ul class="navMenu" id="navMenuId">
   <li class="main_links1"><a href="x" class="main_links1">Home</a></li>
   <li class="main_links2"><a href="x" class="main_links2">About</a></li>
   <li class="main_links3"><a href="x" class="main_links3">Contact us</a></li>
   <li class="main_links4">
      <div class="dropdown">
         <a href="#" class="dropbtn">Universities</a>
         <div class="dropdown-content">
            <a href="x" class="drop1">Lebanese University</a>
            <a href="x" class="drop2">American University of Beirut</a>
            <a href="x" class="drop3">Lebanese American University</a>
            <a href="x" class="drop4">Université Saint-Joseph de Beyrouth</a>
         </div>
      </div>
      <a class="icon" href="javascript:void(0);" onclick="openMenu()">&#9776;</a>
   </li>
</ul>

your last link will then open if you hover it.