html - 悬停时如何更改导航栏的背景颜色？

Question

这是我所有导航元素的代码

nav a:visited {
color: #ffffff;
}
nav ul {
    list-style-type: none;
    margin-top: -10px;
    margin-bottom: 0px;
    padding-right: 7px;
    padding-left: 15px;
}
nav ul li{
    font-size: 18px;
}
nav ul li:hover {
    background-color: #000000;
}
nav ul li a {
    color: white;
    text-decoration: none;
    font-family: "Century Gothic", Consolas, "Andale Mono", "Lucida Console",     "Lucida Sans Typewriter", Monaco, "Courier New", monospace;

    width: 115px;
    display: block;
    float: left;
    text-align: center;

    font-style: normal;
    font-weight: 400;
    text-decoration: none;

    color: #ffffff;
    text-shadow: 0px 1px #6E6E6E;
    text-transform: uppercase;
    background-color: #003300;
    margin-right: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
}

当我将鼠标悬停在 li 上时，为什么它的背景没有改变？我想从深绿色变成黑色。不是整个 ul 只是每个 li block 。我在另一个网站上输入了同样的代码，它成功了!这只是我的样式表的一部分，我将它移动到代码中的所有不同位置，以查看我的其他代码是否影响它。我该如何解决？

Answer 1

将悬停状态应用于您的 anchor 。如果您希望将其应用于整个导航栏，请将悬停状态添加到整个导航栏。

HTML:

<nav>
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>

CSS:

nav{

  width:100%;
}

nav ul{
  display:inline-block;
  width:100%;
}

nav ul li{
  display:inline;
}

nav li a{

  background:#fff;
  color:#000;
}

nav li a:hover{
  background:#565656;
  color:red;
}

nav:hover{
background:green;
}

FIDDLE