从间接祖先继承宽度

时间:2015-06-03 10:41:51

标签: css

我有以下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的情况下完成此操作?

3 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

你去的地方: 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;
}

答案 2 :(得分:0)

尝试以下(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%宽度