title: Background Colour width when hovering over text
body: <p>I'm pretty stuck right now, I'm working on a site and I have the height of the list on my navigation bar sorted but now I want to make the width bigger so when I hover on it the background colour covers a slightly bigger area instead of brushing up against the end of the text.</p>
  
  <p>I've tried padding it but all that seems to do is move the text over slightly and then center the text within that area.</p>
  
  <p>Image (Don't have enough reputation to embed): <a href="http://i.imgur.com/pAxT3gb.png" rel="nofollow">http://i.imgur.com/pAxT3gb.png</a></p>
  
  <p>This is the CSS I currently have for it. I would appreciate any help with this!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
   margin: 0;
  }
  body {
   padding: 0;
   margin: 0;
   border: 0;
  }
  .navigation {
   font-family: Arial;
   font-size: 16px;
   font-weight: lighter;
   background-color: #555;
   color: white;
   width: 100%;
   height: 72px;
   background-image: url("images/download.png");
  }
  .navigation ul {
   list-style-type: none;
   text-decoration: none;
  }
  .navigation li {
    height: 100%;
    width: 80px;
    display: inline-block;
    padding-top: 25px;
    float: right;
    margin-right: 120px;
  }
  .navigation li a {
   text-decoration: none;
   color: white;
  }
  .navigation li a:hover {
   height: 100%;
   padding-top: 25px;
   padding-bottom: 30px;
  
   width: 80px;
   background-color: #556;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="stylesheet.css" /&gt;
   &lt;/head&gt;
  
  
   &lt;body&gt;
    &lt;div class="navigation"&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>