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

问：

我正在为一个班级创建一个模拟网站。我希望其中一个导航项有一个下拉菜单。但是，我遇到了下拉菜单的位置问题。

它的默认位置正对着导航项，但我希望两者之间只有一点空间。但是，当我将 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>

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

<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
}

0赞 user22379202 11/14/2023 #3

下面是在列表项和下拉菜单之间留出一些空间的代码。

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

上一个：当我将鼠标悬停在项目列表下方时，如何停止打开下拉菜单

下一个：为什么在不同组件中渲染列表不适用于材质UI提供的“选择”组件？

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

How do I position a dropdown menu with CSS?

评论

评论