Menuitem - CSS活动状态不起作用

Question

我正在努力使活动菜单元素正常工作。 问题是菜单元素在悬停时看起来正确，但是在选中时，活动元素看起来不像悬停元素。钍 我会感谢任何帮助。

#menuItems {
  width: 980px;
  height: 36px;
  position: absolute;
  bottom: 18px;
  right: 20px;
  top: 150px;
  left: 310px;
  font-size: 23px;
  font-family: Enriqueta-Bold;
  font-weight: bold;
  align-content: center;
  text-align: center;
  background-color: #86ADED;
  -webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
  -moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
  box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
}
#menuItems ul {
  margin: 0 auto;
  align-items: center;
  text-align: center;
  position: relative;
  right: 2%;
}
#menuItems li {
  display: inline-block;
  padding: 4px 15px;
  align-content: center;
  text-align: center;
}
#menuItems li a {
  text-decoration: none;
  display: block;
  color: black;
}
#menuItems li:hover {
  height: 25px;
  background-Color: #0099FF;
  padding: 12px 15px 15px 15px;
  margin-top: -20px;
  cursor: pointer;
}
#menuItems li.active {
  height: 25px;
  background-Color: #0099FF;
  padding: 12px 15px 15px 15px;
  margin-top: -20px;
  cursor: pointer;
}
#menuItems li:hover a {
  color: white;
  padding-bottom: -20px;
}
#menuItems li.active a {
  color: white;
  padding-bottom: -20px;
}

<div id="menuItems">
  <ul>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Interests", "Interests", "Home")</li>
    <li>@Html.ActionLink("Price List", "PriceList", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  </ul>
</div>

Answer 1

你必须使用冒号而不是句号。 ：主动，而不是.active

此外 - 活动状态样式与悬停状态样式相同。