How do I position a dropdown menu with CSS?

Question

I am creating a mock site for a class. I want to one of the navigation items to have a dropdown menu. However, I'm running into issues with the positioning of the dropdown menu.

Its default position is right against the navigation item, but I want there to be just a little bit of space between the two. However, when I add margin-top to container of the dropdown content, then the dropdown content can no longer be scrolled. I know the reason for this -- the extra space prevents the content from being scroll-able -- but I don't know how to fix it.

.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

I hope this updated css resolves your issue. Also I commented out your styles that were not necessary.

* {
  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; */
}

Answer 2

You can use this html and css

HTML

<ul class="nav-items">
  <li>
    <a href="#">About</a>
  </li>
  <li class="dropdown">
    <a href="#">Services</a>
    <ul class="dropdown-menu">

        <li>Advocacy</li>
        <li>Brochures</li>
        <li>Speaker program</li>
        <li>Helpline</li>
      </ul>
  </li>
  <li>
    <a href="#">TransPages</a>
  </li>
  <li>
    <a href="#">Events</a>
  </li>
  <li>
    <a href="#">Our Supporters</a>
  </li>
  <li>
    <a href="#">Get Involved</a>
  </li>
  <li>
    <a href="#">Contact</a>
  </li>
</ul>

CSS

.nav-items {
    margin: 0;
    list-style: none;
    padding: 0;
}

.nav-items li {
    position: relative;
    display: inline-block;
    padding: 5px 10px;
}
.nav-items li a {
    text-decoration: none;
}
.nav-items > li .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    list-style: none;
    padding: 5px 10px;
    width: 150px;
    border: 1px solid #2c2c2c;
    border-radius: 2px;
    display: none;
    background-color: #f2f2f2;
}

.nav-items > li .dropdown-menu li {
    width: 100%;
}
.nav-items > li:hover .dropdown-menu {
    display: block
}

Answer 3

here's the code to have some space between the list item and drop down menu.

#services {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
}