【问题标题】：Full width background for sub-menu, but remain location子菜单的全宽背景，但保留位置
【发布时间】：2020-05-06 11:05:13
【问题描述】：

我的问题很简单，但我找不到任何有效的解决方案。我只想让我的子菜单背景（在我的情况下为黄色）全宽。我知道我将相对位置放在包装器中，因为这就是我想要的。（我希望子菜单从徽标下方开始）。 JSFIDDLE

我想要的结果 - 用图片解释：IMAGE

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navigation</title>
</head>
<body>
  <nav id="main-nav">
    <div class="wrapper">
      <h1 class="logo">Site Name</h1>
      <ul class="main-menu">
        <li><a href="#">Item 1</a></li>
        <li>
        <a href="#">Item 2</a>
        <ul class="sub-menu">
          <li><a href="#">Item 2.1</a></li>
          <li><a href="#">Item 2.2</a></li>
          <li><a href="#">Item 2.3</a></li>
        </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
      <ul class="left-menu">
        <li>Don't mind me.</li>
      </ul>
    </div>
  </nav>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.wrapper {
  max-width: 1000px;
  width: 80%;
  margin: 0 auto;
}

#main-nav {
  width: 100%;
  background-color: #EEE;
}

#main-nav ul {
  display: flex;
}

#main-nav .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#main-nav ul.main-menu {
  flex: 1;
  margin-left: 40px;
}

#main-nav ul.main-menu a {
  height: 50px;
  display: flex;
  align-items: center;
}

#main-nav ul.main-menu a:hover {
  background: #000;
  color: #FFF;
}

#main-nav ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  background-color: yellow;
}

【问题讨论】：

标签： html css submenu

【解决方案1】：

你必须用 <div class="sub-menu-wrap"> 包裹 <ul class="sub-menu"> 并添加以下样式：

.sub-menu-wrap {
    position: fixed;
    width: 100%;
    left: 0;
    background-color: yellow;
}

并更改.sub-menu to的样式：

#main-nav ul.sub-menu {
    width: 80%;
    margin: 0 auto;
}

示例：https://jsfiddle.net/umsqo576/

【讨论】：

【解决方案2】：

为了巧妙地做到这一点，您可能必须将nav-bar 重新构建为更多定义的组件。

但是快速解决方法是：

#main-nav ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  background-color: yellow;
  width: 125%;
  margin-left: -12.5%;
  padding-left: 12.5%;
}

请注意，上述值仅适用于您指定的尺寸。如果您想更改其中任何一个，您还必须修改子菜单样式中的值。

编辑

另一种方法是完全删除包装 div，只依赖边距和填充来为需要居中的元素。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.logo {
  margin-left: 10%;
}

.left-menu {
  margin-right: 10%;
}

#main-nav {
  width: 100%;
  background-color: #EEE;
}

#main-nav ul {
  display: flex;
}
 
#main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#main-nav ul.main-menu {
  flex: 1;
  margin-left: 40px;
}

#main-nav ul.main-menu a {
  height: 50px;
  display: flex;
  align-items: center;
}

#main-nav ul.main-menu a:hover {
  background: #000;
  color: #FFF;
}

#main-nav ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  background-color: yellow;
  padding-left: 10%;
}

如果这对您也不起作用，您可能必须使用 JavaScript 将子列表注入到包装器未包含的另一个容器中。

【讨论】：

可能不是最好的解决方案，我需要在正文标签中添加overflow-x: hidden;。重建导航是什么意思，我唯一能想到的就是在 <li> 标签内添加一个 div 并稍微改组包装器。
@al.cadastar 我添加了另一个建议。
你能告诉我你提到的 JavaScript 解决方案的示例代码吗？

【解决方案3】：

我在您的最终条目中添加了 3 行。将宽度扩展到整个视口，然后必须从左侧开始 60 像素进行补偿 - margin-left -60px 将黄色移动到页面边缘，然后 60px 的填充使文本从您想要的位置开始.当我在那里时，在 jsfiddle 上看起来不错。

#main-nav ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  background-color: yellow; 
  padding-left: 60px;
  margin-left: -60px;
  width: 100vw;
}

【讨论】：

以像素为单位的填充和边距的静态值会使其过于脆弱。以像素为单位在您的屏幕上有效的内容不一定适用于其他屏幕尺寸。