响应式导航调整

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更改为您的导航栏高度。

Answer 2

我最终这样做的方式是：

ul {
  position: absolute;
  width: 100%;
  right: 0px;
  left: 0px;
  li {
    width: 100%;
    a {
      width: @small-width; //defined with my variables
      margin: 0px auto;
      display: block;
    }
  }
}