获得奇怪的闪烁效果

Question

只使用nav元素做一个简单的标题，当我将鼠标悬停在标题上时，我会对字体产生奇怪的闪烁效果。这是代码和gif。链接有一个：悬停规则，当你鼠标悬停它们时会改变颜色，但这不是问题，因为我试图删除该规则并且闪烁仍然发生。任何帮助非常感谢。谢谢你的时间

＆＃13;

＆＃13;

.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: absolute;
  width: 100vw;
  height: 10vh;
  background-color: #666;
  opacity: 1;
  z-index: 6;
}

#menu {
  line-height: 10vh;
  float: right;
  margin-right: 5vw;
}

#title {
  margin-left: 10vw;
  line-height: 10vh;
  float: left;
}

li,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  float: right;
}

li a {
  display: block;
  line-height: 10vh;
  padding: 0 1em;
  font-size: 1.3em;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

ul {
  margin-right: 2em;
}

nav {}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: #FFBB3F
}

＆＃13;

<div id="header">
  <div id="title">
    <h1>Title <span id="subtitle">subtitle</span></h1>
  </div>
  <nav class="cf" id="menu">
    <ul>
      <li><a href="about.html">about</a></li>
      <li><a href="gallery.html">gallery</a></li>
      <li><a href="contact.html">contact</a></li>
      <li><a href="shop.html">shop</a></li>
    </ul>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;