html - 如何使导航中的最后一个元素显示为链接

Question

在我的导航栏中，前三个 li 元素显示为链接，但最后一个不是？ 我实在找不到问题出在哪里 这是 html 代码:

<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>`

CSS 放在这里是因为它有点大:https://pastebin.com/0BxnshVw

关于如何修复它的任何想法。我尝试了几种方法，但没有成功

Answer 1

不应将 div 和 a 直接放在 ul 元素下。你可能应该移动最后一个收盘 </li>到 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>

如果您将鼠标悬停在最后一个链接上，该链接将会打开。