100% Height on LI

Question

How can I obtain to get LI's 100 % in height, just like this:

As you can see, the borders on the LI elements are 100 % in height.

Currently I have this:

<div class="header">
    <div class="row">
        <div class="column grid_13" style="padding-top:5px;">
            <div class="logo"><a href="/"><img src="images/logosmall.png"></a></div> 
        </div><!-- End Grid_3 -->

        <ul class="headerMenu">
            <li>Profile</li>
            <li><img src="images/icons/arrow-down.png" style="vertical-align:middle;"></li>
        </ul>


    </div><!-- End Row -->
</div><!-- End Header -->

This is my CSS. Please note I have not added the "Row" and the "column" or "grid" sections in the CSS, as they are just normal GRID's from 960.css

.header{
    background-image:url("../images/headerstyle.png");
    background-repeat:repeat-x;
   /* height:50px; */
    height:60px;
    border-color:#000;
    border-width:0px 0px 1px 0px;
    border-style:solid;
    -moz-box-shadow: 1px 1px 4px 1px #232323;
    -webkit-box-shadow: 1px 1px 4px 1px #232323;
    box-shadow: 1px 1px 4px 1px #b6b6b6;

}
.headerMenu{
    list-style-type:none;
    margin:0;
    padding:0;

}
.headerMenu li{
    display:inline;
    margin-bottom:10px;
    color:#fff;
    border-color:#086c8a;
    border-width:0px 1px 0px 1px;
    border-style:solid;
    height:100%;  
}

Answer 1

The height: 100% on you li tags doesn't work because you specified display: inline. You can't set the height of an inline element.

You'll either have to use display: inline-block or float: left for this to work.

Note that display: inline-block only works on native inline elements in IE6-7, so it won't work with li tags in those browsers.