如何使用 CSS 定位下拉菜单？

Question

我正在为课程创建一个模拟网站。我想要其中一个导航项有一个下拉菜单。但是，我在下拉菜单的定位方面遇到了问题。

它的默认位置正好靠着导航项，但我希望两者之间只有一点空间。但是，当我将 margin-top 添加到下拉内容的容器时，下拉内容将无法再滚动。我知道原因 - 额外的空间阻止内容滚动 - 但我不知道如何修复它。

.nav-items li {
  list-style-type: none;
  display: inline;
}

.dropdown li {
  list-style-type: none;
  display: block;
}

.services {
  position: relative;
}

.services-list {
  position: absolute;
  display: none;
  background-color: #f1f1ed;
  border: 1px solid black;
  top: 100%;
}

#services a {
  text-decoration: none;
  color: black;
}

#services:hover .services-list {
  display: block;
  position: absolute;
}

<ul class="nav-items">
  <li>About</li>
  <li id="services"><a href="#">Services</a>
    <div class="services dropdown">
      <ul class="services-list">

        <li>Advocacy</li>
        <li>Brochures</li>
        <li>Speaker program</li>
        <li>Helpline</li>
      </ul>
    </div>
  </li>
  <li>TransPages</li>
  <li>Events</li>
  <li>Our Supporters</li>
  <li>Get Involved</li>
  <li>Contact</li>

Answer 1

我希望这个更新的 CSS 可以解决您的问题。我还注释掉了你不必要的样式。

* {
  margin: 0;
  padding: 0;
}

.nav-items {
  display: flex;
  justify-content: space-between;
  padding: 2rem 4rem;
}

.nav-items li {
  list-style-type: none;
  /* display: inline; */
}

.dropdown li {
  list-style-type: none;
  /* display: block; */
}

.services {
  position: relative;
}

.services-list {
  position: absolute;
  display: none;
  background-color: #f1f1ed;
  border: 1px solid black;
  top: 100%;
}

.services-list li {
  padding: 1rem;
}

#services a {
  text-decoration: none;
  color: black;
}

#services:hover .services-list {
  display: block;
  /* position: absolute; */
}