title: CSS: anchor will NOT accept height
body: <p>I have been pulling my hair our for over an hour on this and I just can't understand why it's not working.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="mainmenu"&gt;
      &lt;div class="menu"&gt;
          &lt;ul&gt;
              &lt;li class="page_item page-item-6"&gt;&lt;a href="http://localhost/mysite/blog/"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li class="page_item page-item-4 current_page_item"&gt;&lt;a href="http://localhost/mysite/"&gt;Front Page&lt;/a&gt;&lt;/li&gt;
              &lt;li class="page_item page-item-2"&gt;&lt;a href="http://localhost/mysite/sample-page/"&gt;Sample Page&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div#mainmenu { position: absolute; top: 40px; right: 0; font-size: 77%; }
  div#mainmenu div.menu ul,
  div#mainmenu div.menu ul li,
  div#mainmenu div.menu ul li a
  {
      height: 36px;
  }
  div#mainmenu div.menu ul {  
      display: table;
      float: left;
      width: 700px;
      table-layout: fixed;
  
      position: relative;
  }
  div#mainmenu div.menu ul li
  {
      display: table-cell;
      padding: 0 10px;
      overflow: hidden;
  }
  div#mainmenu div.menu ul li a
  {
      width: auto;
      background: none;
      margin: 10px auto;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/GadNP.jpg" alt="enter image description here"></p>