title: Navigation Bar - LI:HOVER Full Height
body: <p>So I want a navigation bar, with, when I hover over a li / a element, I get a different color for the FULL height of the navigation bar. Because when I hover over it, only the background-color of the text changes... which is quite ugly...</p>
  
  <p>I hope this is clear enough, but the system blocks me uploading an image :o.</p>
  
  <p>Thank You!</p>
  
  <p>EDIT:
  I forgot the HTML and CSS:</p>
  
  <pre><code>    &lt;ul id="nav"&gt;
              &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Courses&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Subjects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Log In&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
      #nav {
      height: 60px;
      font-size: 30px;
      line-height: 60px;
      vertical-align: middle;
      text-align: center;
      background-color: #0080FF;
      width: auto;
      border: 10px solid #16044E;
      border-radius: 20px;
      z-index: 1;
  }
  
  #nav ul {
  }
  
  #nav li {
      display: inline;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
  }
  
  #nav li:hover {
      background-color: orange;
  }
  
  #nav a, a:active {
      color: white;
      text-decoration: none;
  }
  </code></pre>