ヘッダーメニューにうまく擬似要素が反映されない

# ヘッダーメニューにうまく擬似要素が反映されない
<img width="1440" alt="スクリーンショット 2020-05-05 19.18.53.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601861/e0bfd198-2d86-4739-4145-47fb2c587cdd.jpeg">

ヘッダーにナビゲーションメニューを設置しています。なので、親要素の右横に下矢印マークをつけようと思っています。

そのため、擬似要素を使い下矢印をつけたのですが、五番目のメニューにしか反映されません。

<img width="1440" alt="スクリーンショット 2020-05-05 19.21.12.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601861/cc453e5d-eb68-0b3c-e899-1552a83473f2.jpeg">


しかし、子要素にはしっかしりと反映されています。

プログラミングは初心者なので、なぜ親要素に擬似要素がうまく反映されないのかが分かりません。

どなたか助けてください。

以下がメニューのコードになります。

**HTML**
`<nav>
        <ul class="main-nav">
          <li><a href="#">ホーム</a></li>
          <li><a href="#">会社概要</a>
            <ul>
              <li><a href="#">社長挨拶</a></li>
              <li><a href="#">役員紹介</a></li>
              <li><a href="#">企業理念</a></li>
              <li><a href="#">沿革</a></li>
              <li><a href="#">所在地</a>
                <ul>
                  <li><a href="#">アクセス</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">サービス</a>
            <ul>
              <li><a href="#">一般の方向け</a></li>
              <li><a href="#">アスリートの方向け</a>
                <ul>
                  <li><a href="#">プロ</a></li>
                  <li><a href="#">アマチュア</a></li>
                </ul>
              </li>
              <li><a href="#">企業様様向け</a></li>
              <li><a href="#">団体様向け</a>
                <ul>
                  <li><a href="#">プロ</a></li>
                  <li><a href="#">アマチュア</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">商品</a>
            <ul>
              <li><a href="#">商品一覧</a></li>
              <li><a href="#">配送について</a></li>
              <li><a href="#">返品について</a></li>
            </ul>
          </li>
          <li><a href="#">お問い合わせ</a>
            <ul>
              <li><a href="#">よくある質問</a></li>
              <li><a href="#">弊社に関するお問い合わせ</a></li>
              <li><a href="#">記事に関するお問い合わせ</a></li>
            </ul>
          </li>
        </ul>
</nav>`

**CSS**
`*{
  box-sizing: border-box;
}
ul,li{
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.main-nav{
  width: 1200px;
  height: 2rem;
  display: flex;
  margin: 0 auto;
  position: relative;
}
ul.main-nav li{
  width: 100%;
}
ul.main-nav li a{
  display: block;
  color: #fff;
  text-align: center;
  text-decoration: none;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
}
ul.main-nav li a:hover{
  transition: 0.3s;
}
ul.main-nav li:hover a {
  background: #66BAB7;
}
ul.main-nav li li:hover a {
  background: #81C7D4;
}
ul.main-nav li li li:hover a {
  background: #7DB9DE;
}
ul.main-nav li li li a{
  border-left: 1px #fff solid;
}
ul.main-nav li li{
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}
ul.main-nav li:hover > ul > li {
  display: block;
  height: 2rem;
  overflow: visible;
}
ul.main-nav > li > ul > li a{
  width: 100%;
  border-top: 1px solid #fff;
}
ul.main-nav > li > ul > li > ul{
  left: 100%;
  position: relative;
  top: -100%;
  width: 100%;
}
ul.main-nav > li:nth-child(5) ul li {
  left: -100%;
}
ul.main-nav li ul:before{
  position: absolute;
  content: '';
  top: 12px;
  right: 16px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #fff;
}
ul.main-nav li ul li ul:before {
  position: absolute;
  content: '';
  top: 12px;
  left: -20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #fff;
}
ul.main-nav li:last-child ul li ul:before {
  position: absolute;
  content: '';
  top: 12px;
  left: 200%;
  margin-left: -20px;
  border: 5px solid transparent;
  border-right-color: #fff;
}`