如何用CSS定位一个菜单？

sh7euo9m 于 2023-11-19 发布在其他

关注(0)|答案(3)|浏览(69)

我正在为一个类创建一个模拟站点。我希望其中一个导航项目有一个菜单。但是，我遇到了与菜单的定位问题。
它的默认位置是紧靠导航项，但我希望两者之间有一点点空间。然而，当我将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;
}

个字符

css

来源：https://stackoverflow.com/questions/77477319/how-do-i-position-a-dropdown-menu-with-css

3条答案

按热度按时间

suzh9iv81#

我希望这个更新的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; */
}

字符串

赞(0）回复(0）举报 2023-11-19

fcg9iug32#

你可以用这个html和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
}

型

赞(0）回复(0）举报 2023-11-19

lp0sw83n3#

这里的代码有一些空间之间的列表项和下拉菜单.

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

字符串

赞(0）回复(0）举报 2023-11-19

我来回答

如何用CSS定位一个菜单？

3条答案

相关问题

热门标签

最新问答