• 2021-05-01

    List item span all the way

    Comments

    Start a discussion

    Here we have a list. It's not as straight forward as it seems to make the active list item be selected all the way to the left,

    The trick is to use a pseudo element that spans all the way out.

    HTML

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

    CSS

    .menu {
      background: #eee;
      width: 200px;
      overflow: hidden;
    }
    
    .menu > ul > li {
      padding: 0;
    }
    
    .menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .menu li {
      padding-left: 2rem;
      position: relative;
    }
    
    .menu li.active:before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: -100vw;
      background: #000;
      z-index: 0;
    }
    
    .menu li.active a {
      color: #fff;
    }
    
    .menu a {
      display: block;
      position: relative;
      z-index: 1;
      padding: .5rem;
    }

    Sources