title: CSS Make Horizontal List Contents Fill Height
body: <p><a href="http://jsfiddle.net/K4ZGg/" rel="nofollow">http://jsfiddle.net/K4ZGg/</a>
  <strong>Update</strong> this is the right jsfiddle link</p>
  
  <p>My JsFiddle has my attempt so far. I really want to make the items in the menu fill the height of the menu, and be centered in it's list item.</p>
  
  <p>Please help. (I apologize for the simplicity of the question, I promise I've been trying to figure this out for a while)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header id="navmenu"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;label&gt;Welcome &lt;span id="firstName"&gt;&lt;/span&gt;&lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" onclick="return false;"&gt;Option One&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" onclick="return false;"&gt;Option Two&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>Bare CSS (Full is on JsFiddle Link)</strong></p>
  
  <pre><code>#navmenu {
      background-color: rgba(250, 250, 210, 1);
      text-align:right;
      height:42px;
      width:100%
  }
  #navmenu ul {
      height:42px;
  }
  #navmenu ul li {
      display:inline;
      padding: 0 8px;
      height: 100%;
      border-right: solid 1px black;
  }
  #navmenu ul li:last-child {
      border-right: 0;
  }
  </code></pre>