html - 响应式导航调整

Question

我正在制作一个默认情况下与网站标题内联显示的响应式菜单。但是在移动设备上，菜单需要显示为网站标题下方的列表，并通过点击 + 或 - 进行切换。除了两个小问题，我已经实现了所有这些。

1. 我似乎无法让菜单相对于文档流显示，以便它与页面上的文本重叠
2. 我需要菜单占满整个页面的宽度。

我不确定我是否只需要使用这个菜单并将其放在导航之外的它自己的 div 中，或者我是否只是忘记了一些 css 规则。目前设置为:

<nav>
 <div id="nav-div">
  <div id="title"></div>
  <div id="menu-toggle"></div>
  <div id="nav-links">
   <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
   </ul>
  </div>
 </div>
</nav>

CSS:

#nav-links {
  position:absolute;
  width:100%;
  ul {

  }
  li {
    display:block;
    float: none;
    border-bottom: 1px solid black;
    &:last-child {
      border-bottom: none;
    }
    a {

    }
  }
}

Answer 1

您需要在#nav-links 上设置top 和left 属性。如果你也设置了 right，你就不需要 width: 100%。也让它成为 position:relative。像这样:

#nav-div {
  position: relative;
  height: 50px;
}
#nav-links {
  position:absolute;
  left: 0;
  right: 0;
  ...
}

将 50px 更改为您的导航栏高度。