Как сделать так, чтобы последний элемент в навигаторе отображался как ссылка

#html #css

#HTML #css

Вопрос:

в моей навигационной панели первые три элемента 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()">amp;#9776;</a>
    
  </ul>`

css здесь, потому что он немного большой: https://pastebin.com/0BxnshVw

есть идеи, как это исправить. Я пробовал несколько вещей, но ни одна из них не работала

1. Похоже, у вас есть куча стилей, определенных для .main_links1 и т.д., .main_links2 Но ни для .main_links4 одного?

2. Universities Выглядит как ссылка, что вы имеете в виду the last one is not ? — codepen.io/vyspiansky/pen/zYKRWmb

3. я попытался добавить .main_links4 все еще не работал

4. Университеты выглядят как ссылка, но ее нельзя нажать

5. Причина, по которой «ничего не происходит», заключается в том, что для университетов у вас есть href=»#», который остается на той же странице. Другие имеют href=»x», что приводит к 404.

Ответ №1:

У вас не должно быть div и a непосредственно под элементом ul. вероятно, вам следует переместить последнее закрытие </li> в конец блока:

 <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()">amp;#9776;</a>
   </li>
</ul>

ваша последняя ссылка откроется, если вы наведете на нее курсор.

1. извините, но как я могу навести на него курсор?

2. @mrreaper72 Зависание происходит при наведении курсора мыши на ссылку

3. он зависал, но все равно не работал, спасибо, мне удалось это исправить

4. @mrreaper72 вот jsfiddle, который работает для меня: jsfiddle.net/x584zn3a

Ответ №2:

Спасибо всем, мне удалось это исправить

 .navMenu .dropdown-content {
  display: none;
  position: absolute;
  
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}

Я удалил абсолютное позиционирование