为什么悬停在 <li> 标签按钮上不起作用？

Question

我正在尝试制作导航栏，但由于某种原因悬停在我的按钮上不起作用。

@media screen and (max-width: 600px) {
  /*Phones*/
}

@media screen and (min-width: 600px) {
  /*Tablets*/
  .topdiv {
    float: top;
    background-color: black;
    width: 100vw;
    margin-top: -3.5vw;
    margin-left: -8px;
    display: block;
    height: 10vw;
  }
  .home,
  .papers,
  .writers {
    width: 16.5vw;
    height: 8vw;
    background-color: white;
    border: none;
    font-size: 4vw;
    margin-left: 1vw;
    list-style-type: none;
    display: inline-block;
    border-radius: 5px;
    line-height: 7vw;
    text-align: center;
  }
  .home a,
  .papers a,
  .writers a {
    text-decoration: none;
    color: black;
  }
  .home {
    background-color: rgb(192, 192, 192);
  }
  @media screen and (min-width: 992px) {
    /*Desktops*/
  }
  .home:hover,
  .papers:hover,
  .writers:hover {
    background-color: rgb(150, 150, 150);
  }
  @font-face {
    font-family: 'old';
    src: url('/Fonts/OET.ttf');
  }
}

<div class="topdiv">
  <h1 style="color: white;transform:translateX(1%) translateY(43%);font-size:5vw;font-family:old;">The EME Times</h1>
  <ul style="margin-top:-8.5vw;margin-left:35vw;">
    <li class="home"><a href="#home">Home</a></li>
    <li class="papers"><a href="#papers">Papers</a></li>
    <li class="writers"><a href="#writers">Writers</a></li>
  </ul>
</div>

Answer 1

只需要使用 position: relative;在按钮中。感谢 @mrplungjian 帮助我找到答案。