title: Forcing <a> tag have the same height as parent <li>
body: <p>I am designing a top bar for a website and cannot figure out how to force the <code>&lt;a&gt;</code> elements below have the same height as the parent <code>&lt;li&gt;</code> elements. The code below shows the <code>&lt;li&gt;</code> elements with a green background and the <code>&lt;a&gt;</code> elements with a yellow background. I would like to have the yellow boxes span the whole height of the green boxes. Setting the height of the <code>&lt;a&gt;</code> elements to 100% doesn't do trick. What am I missing?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;style&gt;
      div#topbar {
        width: 100%;
        height: 30px;
        top: 0;
        border: 1px solid black;
      }   
      #topbar ul {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 30px;
      }
      #topbar ul li {
        margin: 0;
        padding: 0 10px;
        background-color: green;
        display: inline;
        float: left;
      }
      #topbar a {
        background-color: yellow;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="topbar"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=""&gt;Item 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Item 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>