Question

我正在尝试制作一个包含两个级别链接的菜单。我想要做的是使它当你点击顶层然后打开2级。现在我的问题是我想要两列，但我希望二级是一个全宽列。

请在此处查看我的codepen：http://codepen.io/mathiasha/pen/KdzmBL

我不知道在CSS或jQuery中使用它是否最简单。我无法控制HTML。

<div class="block block-menu-block">
  <ul class="menu">
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
      <ul class="menu">
        <li><a href="#">2.1</a></li>
        <li><a href="#">2.2</a></li>
        <li><a href="#">2.3</a></li>
        <li><a href="#">2.4</a></li>
      </ul>
    </li>
    <li>
      <a href="#">3</a>
      <ul class="menu">
        <li><a href="#">3.1</a></li>
        <li><a href="#">3.2</a></li>
        <li><a href="#">3.3</a></li>
        <li><a href="#">3.4</a></li>
      </ul>
    </li>
    <li>
      <a href="#">4</a>
    </li>
    <li>
      <a href="#">5</a>
    </li>
    <li>
      <a href="#">6</a>
      <ul class="menu">
        <li><a href="#">6.1</a></li>
      </ul>
    </li>
  </ul>  
</div>

请参阅下面的CSS：

.block-menu-block {
  width: 100%;
  border: 5px solid red;
  overflow: hidden;
}

ul.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-weight: bold;
}
ul.menu li {
  display: block;
  width: 50%;
  border: 1px solid #000;
  margin: -1px;
  float: left;
  text-align: center;
}
ul.menu li a {
  display: block;
  padding: 20px;
  text-decoration: none;
}

li a ~ ul a {
  color: green;
}

Answer 1

只要将第一级LI设置为width:50%，子项就会受到限制。设置子级别绝对定位可能是一个解决方案，但在您的情况下，它会打破期望的效果。

所以我可以给你一个“脏”的解决方案就是使用它：

.block-menu-block ul li ul{ width:200%; margin-left:-100%; }
.block-menu-block ul li ul li{ width:100%; background:#fff;}

子级UL宽度将乘以2，然后具有与菜单相同的宽度。使用负边距进行翻译，否则，它将从父LI开始，并将耗尽菜单边界。

最后，将子LI的宽度重置为100％（背景用于隐藏父边框）。

Updated Codepen

使用jQuery或CSS为子菜单提供完整的列宽？

1 个答案: