Question 285100 in Html Question posted in
Some basic documentation can be found here.

Html – How do I position a dropdown menu with CSS?

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>
Tags:

2

Answers


  1. 0

    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; */
}
    Login or Signup to reply.
  2. 0

    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
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search