html - 悬停时更改背景颜色

Question

当我试图改变“a:hover”中的背景颜色时，它并没有完全填充旧的背景颜色。我应该在css中为此做什么？

HTML

<header>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a href="#">ORDER</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">TESTIMONIALS</a></li>
      <li><a href="#">CAREERS</a></li>
      <li><a href="#">CONTACT US</a></li>
    </ul>
  </nav>
</header>

css

header nav ul {
    margin-top:50px;
    margin-right:10px;
}
header nav ul li {
    float:left;
    background-color:#018343;
    list-style-type:none;
    margin:40px 5px 0 0;
    padding:5px;
    padding-right:10px;
    color:#fff;
    font-family:"Arial";
    font-weight:bold;
    font-size:16px;
    border-radius:6px 0px 6px 0px;
    text-align:center;
    box-shadow:1px 1px 7px rgba(0, 0, 0, 0.25);
    text-shadow:1px 1px 7px rgba(0, 0, 0, 0.5);
    color:#ff9000;
}
header nav ul li a {
    color:#ff9000;
    text-decoration:none;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
}
header nav ul li a:hover {
    color:#fff;
    background-color:#010101;
}

Answer 1

演示

CSS

.header nav ul {
    margin-top:50px;
    margin-right:10px;
}
.header nav ul li {
    float:left;
    background-color:#018343;
    list-style-type:none;
    margin:40px 5px 0 0;
    padding:5px;
    padding-right:10px;
    color:#fff;
    font-family:"Arial";
    font-weight:bold;
    font-size:16px;
    border-radius:6px 0px 6px 0px;
    text-align:center;
    box-shadow:1px 1px 7px rgba(0, 0, 0, 0.25);
    text-shadow:1px 1px 7px rgba(0, 0, 0, 0.5);
    color:#ff9000;
}
.header nav ul li a {
    color:#ff9000;
    text-decoration:none;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
}
.header nav ul li:hover {
    color:#fff;
    background-color:#010101;
}