CSS Make Horizontal List Contents Fill Height

Question

http://jsfiddle.net/K4ZGg/ Update this is the right jsfiddle link

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.

Please help. (I apologize for the simplicity of the question, I promise I've been trying to figure this out for a while)

HTML

<header id="navmenu">
    <ul>
        <li>
            <label>Welcome <span id="firstName"></span></label>
        </li>
        <li>
            <a href="#" onclick="return false;">Option One</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Option Two</a>
        </li>
    </ul>
</header>

Bare CSS (Full is on JsFiddle Link)

#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;
}

Answer 1

Line-height is the way to go. Just set the list items line height to the same height of the container (the ul in this case)

#navmenu ul li {
display:inline;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
    line-height: 42px;
}

If you want the black lines to get to border of the ul just set the list items to inline block:

#navmenu ul li {
display:inline-block;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
    line-height: 42px;
}

Fiddle here: http://jsfiddle.net/gleezer/K4ZGg/1/

EDIT: As the OP requested that the link would be selectable for the entire height:

#navmenu ul li a{
   line-height: 42px;
   display: inline-block;
}

We need to make the entire anchor span the whole height of the list item. Same trick as above: line height to span the full height.

Fiddle here: http://jsfiddle.net/gleezer/K4ZGg/5/