Question

我有以下HTML

<ul id="nav">
  <li>
    <a href="#">Menu Item 1</a>
    <ul class="sub_menu">
      <!-- full of <li> sub menu items -->
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 2</a>
    <ul class="sub_menu">
      <!-- full of <li> sub menu items -->
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 3</a>
  </li>
</ul>

#nav是浏览器窗口宽度的100％。

仅使用CSS我希望将Menu Item并排放在具有类似CSS的容器中：

{ width: 1000px;  margin: 0 auto; }

但我希望.sub_menu s与#nav的宽度相同。

如何在不更改HTML的情况下完成此操作？

Answer 1

您可以position: relative #nav，使用li然后position: absolute; left: 0; right: 0 .sub_menu来处理您的事情。

这种方式.sub_menu的宽度与#nav的宽度相同，与li的宽度无关。你必须添加和调整一些更多的样式，使它看起来漂亮和位置，但我会把它留给你。

另一个要求是li将position: static保持.sub_menu，因为#nav的位置必须相对于{{1}}。

编辑：@ simon的答案几乎是我的一个实现，但是OP在那里发表评论表明它不够。我们仍然不确定问题是什么。

Answer 2

你去的地方： http://codepen.io/anon/pen/YXZQMo

Subnav UL现在具有与父li相同的宽度

#nav { width: 1000px;  margin: 0 auto; }
ul{
  margin:0;
  padding:0;
  list-style:none;
}
ul li{
  display:block;
  float:left;
  padding: 5px 10px;
  width:auto;
}
ul li:hover ul{
  display:block;
}
ul li ul{
  display:none;
  width:100%;
  background-color:red;
  min-height:20px;
  transition:all 0.3s;
}
ul li ul li{
  display:block;
  float:none;
}

Answer 3

尝试以下（jsbin）：

* { margin: 0; padding: 0 }

#nav, .sub_menu {
  width: 100%;
  height: 30px;
  position: relative;
  background: green;
}

#nav > li > a {
  z-index: 1;
  position: relative;
}

#nav > li {
  float: left;
  list-style-type: none;
}

.sub_menu {
  position: absolute;
  left: 0;
  background: red;
  top: 30px
}

这会使所有按钮一个接一个地保持子菜单100％宽度

从间接祖先继承宽度

3 个答案: