CSS嵌套列表与活动项目填充整个行 [英] Css nested list with active item to fill the whole row

问题描述

我有一个无限嵌套列表，可以用作菜单.我有一个.active列表项，可为锚点添加背景色.

I have an unlimited nested list that serves as a menu. I have an .active list item to add a background color to the anchor.

我希望它用背景颜色填充整个行，而不是在其中添加一些标签.这意味着我需要a标记才能填充整个行，同时要使文本缩进显示.

I would like it to fill the whole row with the background color, not start a few tabs in. That means I would need the a tag to fill the whole row and at the same time have the text appear indented.

.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>

推荐答案

我将使用伪元素来创建背景，如下所示:

I would use a pesudo-element to create the background like this:

.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嵌套列表与活动项目填充整个行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！