title: HTML/CSS Help making link-hover fill the whole navigation bar
body: <p>Im trying to make the navigation bar highlight fully when we hover over a link but it's currently only working horizontally. I think its something really small I'm doing wrong and have been trying four hours. Heres the code I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    html, body { 
      
      /*require html and body 100% height and width to allow other child elements to use percentages*/
      
       height: 100%; 
       width: 100%; 
       margin: 0;
      
      }
      
      a {
       text-decoration: none;
       display: block;
       color: black;
      }
      
      li {
       list-style: none;
      }
      
      
      div{
       margin-left: 2.5%;
       margin-right: 2.5%;
       margin-top: 1%;
       border: 1px solid black;
      }
      
      .content_section{
       height: 150%;
       margin-bottom: 1%;
      }
      
      #footer{
       height: 25%;
       margin-bottom: 1%;
      }
      
      #banner{
       margin-top: 2.5%;
       height: 15%;
       position: relative;
      }
      
      #banner img{
       width: 100%;
       height: 100%;
      }
      
      #navbar{
       padding: 0;
       height: 5%;
       
  
      text-align: center;
       position: relative;
       background-color: #FFCB3D;
      }
  
      #navbar li a {
       display: block;
        text-align: center;
        text-decoration: none;
        width: 20%;
        height: 100%;
        float: left;
      }
      
      #navbar ul a:hover{
       height: 100%;
       background-color: #FFF17C;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
   &lt;head&gt;
    &lt;title&gt;Sample Site&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css.css"&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
    &lt;div id="banner"&gt;
     &lt;img src="resources/images/banner-image.png"&gt;  
    &lt;/div&gt;
  
    &lt;div id="navbar"&gt;
     &lt;ul id="navbar"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page A&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page B&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page C&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page D&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Page E&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="content_section"&gt;
    &lt;/div&gt;
  
    &lt;div id="footer"&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>