HTML/CSS - 导航栏的背景颜色在放置在另一个背景上时具有神秘的黑白条

Question

我有一个非常神秘和令人抓狂的问题，导航栏会在鼠标悬停时改变颜色。每次我尝试分配导航栏以在悬停时更改颜色时，它都会以正确的颜色出现，但还会在栏的左侧显示一小条白色，在栏的右侧显示一小条黑色。一开始并不太明显，但最终它使导航栏元素看起来像是偏移了一个像素。下图显示了悬停时的背景颜色以及黑白神秘条。该图像还显示了当我关闭主体的背景颜色时如何没有神秘条。

似乎只有当我在导航元素下方（无论是在正文中还是在整个 HTML 中）分配了背景色时，这些神秘条才会出现。但是当我删除背景颜色时，条形似乎消失了。我根本找不到关于这个问题的任何文献，也无法解释为什么只有在下面有另一种颜色时才会发生这种情况。我曾尝试使用背景图像而不是背景颜色，但无论哪种方式似乎都会出现相同的错误。下面是我的 HTML 和 CSS 供参考。如果我遗漏了任何可能有助于理解问题的细节，请告诉我。

/* basic body */

body {
  /*background-image: url("zSupporting/Imagery/Background_screenshot.png");*/
  background-color: #0e95ef;
  padding-bottom: 7vw;
  width: 98vw;
}


/* (navBAR) Nav Bar Customization */

.navBAR a {
  margin: 0.7vw;
}

.navBAR {
  float: left;
  padding-left: 3vw;
  padding-bottom: 2vw;
  padding-top: 1.5vw;
  width: 98vw;
}

.navBAR ul {
  padding: 0vw;
  margin: 0px;
}

.navBAR ul li {
  background-color: blue;
  border-radius: 0vw;
  float: left;
  list-style: none;
  position: relative;
  width: 15vw;
}

.navBAR ul li a {
  color: white;
  display: block;
  font-size: 1.4vw;
  font-weight: bolder;
  text-align: center;
  text-decoration: none;
}

.navBAR ul li ul {
  display: inline;
  position: absolute;
  visibility: hidden;
  width: 10vw;
}


/* Make list turn yellow */

.navBAR ul li:hover {
  background-color: orange;
  background-size: 100%, 100%;
  background-clip: border-box;
  color: black;
}


/* Change lettering to black */

.navBAR ul li:hover a {
  color: black;
}


/* Make sub-list items visible */

.navBAR ul li:hover ul {
  visibility: visible;
}


/* Sublist text to stay white */

.navBAR ul li:hover ul a {
  color: white;
}


/* Make sub-list item turn yellow */

.navBAR ul li ul li:hover {
  background-color: orange;
}


/* Make sub-list text black */

.navBAR ul li ul li:hover a {
  color: black;
}

<div class="navBAR">
  <ul>
    <!-- Home Page List Item -->
    <li class="navBUTTON">
      <a href="index.html">Home</a>
    </li>

    <!-- Mitchshow List Item -->
    <li>
      <a href=#>Mitchshow</a>
      <ul>
        <li><a href="https://www.youtube.com/@MitchShow" target="_blank" rel="noopener noreferrer">YouTube Link</a></li>
      </ul>
    </li>

    <!-- Brosplay List Item -->
    <li>
      <a href=#>Brosplay!</a>
      <ul>
        <li><a href="https://www.youtube.com/@newsupernotcool" target="_blank" rel="noopener noreferrer">YouTube Link</a></li>
      </ul>
    </li>

    <!-- A-discussions List Item -->
    <li>
      <a href=#>A-discussions</a>
      <ul>
        <li><a href="https://www.youtube.com/@adiscussions" target="_blank" rel="noopener noreferrer">YouTube Link</a></li>
      </ul>
    </li>

    <!-- SNC Archive List Item -->
    <li>
      <a href=#>SNC Archive</a>
      <ul>
        <li><a href="https://www.youtube.com/@oldsupernotcool" target="_blank" rel="noopener noreferrer">YouTube Link</a></li>
      </ul>
    </li>

    <!-- World of Warcraft List Item -->
    <li>
      <a href="SNC_WOW.html">Warcraft</a>
    </li>
  </ul>
</div>