Html 移动菜单上显示的链接（当不应显示时）、处于活动状态和悬停状态

我有一个网站，活动链接和悬停链接显示在手机菜单上，而不应该显示。所以他们好像一直在那里。 ```

html, body 
{
  font-family: "Lato", sans-serif; 
  width: 100%; 
  height: auto; margin: 0;
 }

 .nav {
  background-color: #3333FF;
  width: 100%; 
  height: 40px; 
  line-height: 40px;
}

.menu {
  font-family: Monserrat, sans-serif; 
  font-size: 18px; 
  color: white; 
  list-style-type: none; 
  padding: 0; 
  position: relative; 
  z-index: 1;
}

.menu a {
  text-decoration: none; 
  color: #fff; 
}

.menu ul li {
  text-align: center; 
  display: inline; 
  padding: 8px; 
  margin: 0 5px 0 5px; 
  width: 24.11%;
}

.menu li:visited, .menu li:active, .active, .menu li:hover 
{
  background: #0000EE; 
  color: #fff;
}

label {
  margin: 0 14px 0 0; 
  font-size: 18px; 
  display: none;
}

#toggle {
  display: none;
}

/* Show Hamburger */
@media screen and (max-width: 500px) {
  label {
    cursor: pointer; 
    display: block; 
    color: #fff;
  }

  .menu {
    text-align: center; 
    width: 100%; 
    display: none;
  }

  .menu a {
    display: block; 
    background-color: #3333FF;
    margin-bottom:-40px; 
    padding: 0;
  }
  .menu li a {border-top: 1px solid #F4F4F4;}

.menu li a:active, .menu li a:hover; .menu li a:link {color: #fff; background: 0; display: none;}

  #toggle:checked + .menu {
    display: block;
  }
}



<div class="nav"><label for="toggle">&#9776;</label> <input 
     id="toggle" type="checkbox" /> <div class="menu"><ul><li><a 
     href="http://index.html">Home</a></li><li><a 
     href="http://news.html">News</a></li><li class="active"><a 
     href="http://contact.html">Contacts</a></li><li><a 
     href="http://policies.html">Policies</a></li><li><a 
     href="http://members.html">Members</a></li><li><a 
     href="http://volunteer.html">Volunteer</a></li><li><a 
     href="http://links.html">Links</a></li></ul></div>

html，正文
{
字体系列：“Lato”，无衬线；
宽度：100%；
高度：自动；边距：0；
}
.导航{
背景色：#3333FF；
宽度：100%；
高度：40px；
线高：40px；
}
.菜单{
字体系列：Monserrat，无衬线；
字号：18px；
颜色：白色；
列表样式类型：无；
填充：0；
位置：相对位置；
z指数：1；
}
.菜单a{
文字装饰：无；
颜色：#fff；
}
李先生{
文本对齐：居中；
显示：内联；
填充：8px；
保证金：0 5px 0 5px；
宽度：24.11%；
}
.menu li:已访问，.menu li:活动，.active，.menu li:悬停
{
背景：#0000EE；
颜色：#fff；
}
标签{
利润率：0 14px 0；
字号：18px；
显示：无；
}
#拨动{
显示：无；
}
/*展示汉堡包*/
@媒体屏幕和屏幕（最大宽度：500px）{
标签{
光标：指针；
显示：块；
颜色：#fff；
}
.菜单{
文本对齐：居中；
宽度：100%；
显示：无；
}
.菜单a{
显示：块；
背景色：#3333FF；
边缘底部：-40px；
填充：0；
}
.menu li a{边框顶部：1px实心#f4；}
.menu li a:活动.menu li a:悬停；.menu li a:链接{color:#fff；背景：0；显示：无；}
#切换：选中+菜单{
显示：块；
}
}
☰  

有谁知道它为什么这么做，因为这对我来说是个谜。我试过很多东西。我放置了一个活动的悬停显示“无”，但它仍然像一个bug一样显示

尝试使用 不透明度：0； 可见性：隐藏； 太