为什么悬停在<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帮助我找到了答案。