title: How can I get my CSS hover effect to cover the entire top and bottom of my navigation bar?
body: <p>I would like it so that when you hover over each link, the hover effect covers both top and bottom of the navigation bar, as well as a little padding to the left and right. How can I achieve this? Thank you. </p>
  
  <p>For example: <img src="https://i.stack.imgur.com/XRls4.png" alt="Example"></p>
  
  <pre><code>#navigation {
      width: 1000px;
      height: 65px;
      background-color: rgba(0, 0, 0, 0.8);
      box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.58);
      opacity: 0.9;
      border-radius: 5px;
      position: fixed;
      margin-top: 20px;
      top: 10px;
      left: 0;
      right: 0;
      margin: 0 auto;
  }
  
  #navigation &gt; ul {
      display: inline-block;
      position: absolute;
      list-style-type: none;
  }
  
  #navigation &gt; ul &gt; li {
      display: inline-block;
      padding: 0px 20px;
  }
  
  #navigation &gt; ul &gt; li &gt; a {
      color: #fff;
      font-family:"Trebuchet MS", Helvetica, sans-serif;
      font-size: 30px;
      color: #fff;
      text-decoration: none;
      display: block;
  }
  
  #navigation &gt; ul &gt; li &gt; a:hover, #navigation &gt; ul &gt; li &gt; a:active {
      color: #FFF;
      background: rgba(255, 255, 255, 0.1);
      background-repeat: repeat;
      height: 100%;
      width: auto;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rxejwqL2/" rel="nofollow noreferrer">http://jsfiddle.net/rxejwqL2/</a></p>