带有活动项的 Css 嵌套列表填充整行

Question

我有一个作为菜单的无限嵌套列表。我有一个.active 列表项来为锚点添加背景颜色。

我希望它用背景颜色填充整行，而不是在其中开始几个选项卡。这意味着我需要a 标记来填充整行，同时让文本缩进。

.menu {
  background: #eee;
  width: 300px;
}

.menu > ul {
  margin-left: -25px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding-left: 25px;
}

li.active a {
  background: red;
}

a {
  display: block;
}

<div class="menu">
<ul>
  <li><a href="#">Level 1</a></li>
  <li>
    <ul>
      <li>
        <ul>
          <li class="active">
            <a href="#">Level 3</a>
          </li>
        </ul>
        <a href="#">Level 2</a>
       </li>
    </ul>
    <a href="#">Level 1</a>
   </li>
  <li><a href="#">Level 1</a></li>
</ul>
</div>

Answer 1

我会使用一个伪元素来创建这样的背景：

.menu {
  background: #eee;
  width: 300px;
  overflow: hidden;
}

.menu>ul {
  margin-left: -25px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding-left: 25px;
  position: relative;
}

li.active:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -1000px; /* a big value so it works with any level*/
  background: red;
  z-index: 0;
}

a {
  display: block;
  position: relative;
  z-index: 1;
}

<div class="menu">
  <ul>
    <li><a href="#">Level 1</a></li>
    <li>
      <ul>
        <li>
          <ul>
            <li class="active">
              <a href="#">Level 3</a>
            </li>
          </ul>
          <a href="#">Level 2</a>
        </li>
      </ul>
      <a href="#">Level 1</a>
    </li>
    <li><a href="#">Level 1</a></li>
  </ul>
</div>