Question

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

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

我不确定我是否只需要使用此菜单并将其放在导航栏外的自己的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

您需要在top上设置left和#nav-links属性。如果您也设置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;
    }
  }
}

响应式导航调整

2 个答案: