title: Change background color on hover
body: <p>When I am trying to changing the bg color in "a:hover", its not completely filling the old background-color. What should I do for this in css? </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;ORDER&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;TESTIMONIALS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;CAREERS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>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;
  }
  </code></pre>