四个中的两个列表项不能正常工作。和其他两个一样好吗？

Question

我的两个列表项 - 配置文件和警报 - 没有响应CSS规则和h ref。它不会显示悬停时的转换，也不会被点击 如果有人可以帮助我解决上述问题。

＆＃13;

＆＃13;

.uList {
  margin-top: 50px;
  margin-left: 100px;
}

.listItem {
  float: left;
  padding: 10px;
  margin-left: 50px;
  background: #fff;
  font-family: sans-serif;
  /*text-transform: uppercase;*/
  font-size: 30px;
  width: 150px;
  height: 30px;
  border-radius: 80px;
  line-height: 30px;
  text-align: center;
  border: 5px solid #009688;
  overflow: hidden;
  background: transparent;
  transition: .3s;
  position: relative;
}

.btn:before {
  color: #009688;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #009688;
  opacity: .5;
  top: -100%;
  left: 0;
  z-index: -1;
  transition: .3s;
}

.btn:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #009688;
  top: -100%;
  left: 0;
  z-index: -1;
  transition: .3s;
  transition-delay: .2s;
}

.btn:hover {
  color: #fff;
}

.btn:hover:before {
  top: 0;
}

.btn:hover:after {
  top: 0;
}

.btn {
  color: #009688;
  text-decoration: none;
}

＆＃13;

<div>
  <ul class="uList">
    <li class="listItem"><a class="btn" href="index.php">Home</a></li>
    <li class="listItem"><a class="btn" href="profile.php">Profile</a></li>
    <li class="listItem"><a class="btn" href="Alerts.php">Alerts</a></li>
    <li class="listItem"><a class="btn" href="index.php?logout='1'">Logout</a></li>

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;