マウスオーバーでマウスオーバー以外のメニューを非アクティブにする

小ネタ

ポイントはこれ。
メニューの親に当たるulにマウスオーバーした時に、:not を使ってマウスオーバーしているメニュー以外に非アクティブに見えるスタイルを当てます

ul {
  &:hover {
    li {
      &:not(:hover) {
        color: #bbb;
      }
    }
  }
}