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>

Css 嵌套列表，活动项填满整行

Css nested list with active item to fill the whole row

css

list

text-indent