title: CSS Menu (Can't get the tabs to full height)
body: <pre><code>&lt;style type="text/css"&gt;
  html, body {
      background: #fff;
      margin: 0;
      padding: 0;
  }
  
  #nav {
      font-family: Verdana, sans-serif;
      height: 29px;
      font-size: 12px;
      padding: 0 0 0 10px; /* this is used for something else */
      background-color: #456;
  }
  
  #nav ul, #nav ul li {
      list-style: none;
      margin: 0;
      padding: 9px 0 0 0px;
  }
  
  #nav ul {
      text-align: center;
  }
  
  #nav ul li {
      display: inline;
  }
  
  #nav ul li.last {
      margin-right: 0;
  }
  
  
  #nav ul li a {
      color: #FFF;
      text-decoration: none;
      padding: 0px 0 0 20px;
      height: 29px;
  }
  #nav ul li a span {
      padding: 8px 20px 0 0;
      height: 21px;
  }
  
  #nav ul li a:hover {
      background: #789;
  }
  &lt;/style&gt;
  
  &lt;div id="nav"&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="/1/"&gt;&lt;span&gt;One&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/2/"&gt;&lt;span&gt;Two&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/3/"&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/4/"&gt;&lt;span&gt;Four&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a little problem with that, as it doesn't make the "hover background" 100% of the height of the nav bar.</p>