Как отформатировать выпадающее меню с помощью липкой навигационной панели (без jQuery)

Question

Я пытаюсь создать личный веб-сайт с липкой навигационной панелью, в которой также есть выпадающее меню под некоторыми пунктами.Панель навигации «залипает», но выпадающее меню не появится.Я обнаружил, что проблемы вращаются вокруг установки абсолютного положения выпадающего содержимого и переполнения ul, который создает «навигационную панель» скрытым.(PS Я относительно новичок в CSS, поэтому извиняюсь заранее).

Пока что я пытался изменить положение выпадающего контента на «фиксированный», но это работает только до тех пор, пока выпрокрутить вниз.Как только вы прокрутите вниз (как указано), он останется на том же расстоянии вниз и не будет соответствовать новому местоположению панели навигации.Кроме того, я изменил переполнение панели навигации на видимое.Раскрывающийся список работает правильно, но форматирование навигационной панели полностью сбито с толку.По сути, все эти изменения сделали проблему «лучше», но только создают новые проблемы с ними.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  width: 100%;
  top: 0px;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: rgb(228, 40, 40);
}

li.dropdown {
  display: inline-block;
}

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

<header>
  <h1><a id="myNameTop" href="/">JK</a></h1>
</header>

<ul>
  <li class="nav-item"><a class="nav-link" href="/resume">Resumé</a></li>
  <li class="dropdown nav-item">
    <a class="dropbtn" href="/code">Code</a>
    <div class="dropdown-content">
      <a href="/gitHub">GitHub</a>
      <a href="/javaScriptProjects">Embeded JavaScript Projects</a>
    </div>
  </li>
  <li class="nav-item"><a class="nav-link" href="/graphicDesign">Graphic Design</a></li>
  <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
</ul>

В настоящее время я нахожу указатель мыши на элементе панели навигации, и выпадающий элемент вообще не падает (независимо от того, прокручивал я или нет).

Я хочу видеть выпадающее меню при наведении курсора.

Answer 1

Проблема в том, что вы прячете overflow из ul.

Вы добавили overflow: hidden к <ul>, чтобы его фон расширялся под всеми значениями <li> с, поскольку <li> с float:left без особой причины.

Я предлагаю "плавать" <li> с использованием либо display:inline-block на них, либо display:flex на их родителе.И, очевидно, удаляя оскорбительного overflow:hidden.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  background-color: #333;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  width: 100%;
  top: 0px;
}

li {
  /* float: left; */
  display: inline-block;
}

li a,
.dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: rgb(228, 40, 40);
}

li.dropdown {
  display: inline-block;
}

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

body {
  margin: 0;
  min-height: 200vh;
}

<header>
  <h1><a id="myNameTop" href="/">JK</a></h1>
</header>

<ul>
  <li class="nav-item"><a class="nav-link" href="/resume">Resumé</a></li>
  <li class="dropdown nav-item">
    <a class="dropbtn" href="/code">Code</a>
    <div class="dropdown-content">
      <a href="/gitHub">GitHub</a>
      <a href="/javaScriptProjects">Embeded JavaScript Projects</a>
    </div>
  </li>
  <li class="nav-item"><a class="nav-link" href="/graphicDesign">Graphic Design</a></li>
  <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
</ul>