html - 悬停时导航栏上的背景颜色更改问题

Question

当鼠标悬停在导航栏上时，我试图改变导航栏的背景颜色。我能够这样做CSS:

nav li a:hover {
  background-color:white;
  background-color: rgba(80, 80, 205, 0.3);
  text-decoration: none;
  color: black;
}

但是当我完成我的导航栏的样式化时，它出于某种原因停止了工作。任何想法为什么？ PS:我非常了解编码(1 周内!)如果您对我的代码的任何部分提出任何反馈，我将不胜感激。

nav {
  width: 100%;
  overflow: hidden;
  margin: 0 0 0 0;
  background-color: rgb(80, 80, 205);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 15pt;
}

nav li {
  float: left;
}

li a {
  display: block;
  color: white;
  padding: 16px;
  background-color: rgb(80, 80, 205);
  text-align: center;
  text-decoration: none;
}

nav li a:hover {
  background-color: white;
  background-color: rgba(80, 80, 205, 0.3);
  text-decoration: none;
  color: black;
}

<nav>
  <ul>
    <li><a href="#">About me</a></li>
    <li><a href="#links">Social Media</a></li>
    <li><a href="#actual-portfolio">Projects</a></li>
  </ul>
</nav>

Answer 1

为 li .. 添加悬停

nav {
  width: 100%;
  overflow: hidden;
  margin: 0 0 0 0;
  background-color: rgb(80, 80, 205);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 15pt;
}

nav li {
  float: left;
}

li a {
  display: block;
  color: white;
  padding: 16px;
  background-color: rgb(80, 80, 205);
  text-align: center;
  text-decoration: none;
}

nav li a:hover {
  background-color: rgba(80, 80, 205, 0.3);
  text-decoration: none;
  color: black;
}

nav li:hover {
  background-color: #fff;
}

<nav>
  <ul>
    <li><a href="#">About me</a></li>
    <li><a href="#links">Social Media</a></li>
    <li><a href="#actual-portfolio">Projects</a></li>
  </ul>
</nav>