<ul class="menu">
  <li>
    <a href="#">スイーツ</a>
    <ul>
      <li>
        <a href="#">チョコ</a>
        <ul>
          <li><a href="#">ミルク</a></li>
          <li><a href="#">ビター</a></li>
        </ul>
      </li>
      <li>
        <a href="#">ジャム</a>
        <ul>
          <li class="active"><a href="#">苺</a></li>
          <li><a href="#">ぶどう</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">パン</a>
    <ul>
      <li>
        <a href="#">ハード系</a>
        <ul>
          <li><a href="#">バケット</a></li>
        </ul>
      </li>
      <li><a href="#">ソフト系</a></li>
    </ul>
  </li>
  <li><a href="#">ドリンク</a></li>
</ul>
.menu > li.active > a,
.menu > li:has(.active) > a {
  background-color: MidnightBlue;
  color: white;
}

.menu > li li.active > a,
.menu > li li:has(.active) > a {
  background-color: PaleTurquoise;
}

.menu > li li li.active > a,
.menu > li li li:has(.active) > a {
  background-color: LightSkyBlue;
}

.menu {
  margin: 20px;
  padding: 20px;
  font-size: 16px;
  border-radius: 0.2em;
  background-color: WhiteSmoke;
}

.menu li {
  list-style: none;
}

.menu li a {
  display: block;
  margin-bottom: 0.1em;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  color: black;
  text-decoration: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.