liタグではなくaタグに対してスタイリングするのはなぜですか？
なにかメリットはあるのでしょうか？

.menu li a {
  display: inline-block;
  width: 100px;
  text-align: center;
  padding: 8px 0;
  color: #333;
  text-decoration: none;
}

.menu li a.active {
  background: #333;
  color: #fff;
}