Vertically align text bottom - absolute position, without knowing width

I'm getting stumped here... I'm trying to vertically align text in a top nav that 开发者_如何转开发has two different lines on each li. Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element.

In my navigation, we don't have a standard width, but need all items aligned by the bottom text.

Here's my code

<div id="menu">
 <ul>
  <li><a href="#">first line</a></li>
  <li><a href="#">Second<br />Line</a></li>
  <li><a href="#">third Line</a></li>
 </ul>
</div>

Here's the CSS I'm using:

#menu {
    margin: 40px auto 0px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #666666;
    float: right;
    width:600px;
}

#menu ul {
    list-style:none;
    list-style-type:none;
    height:30px;
}

#menu ul li {
    float:left;
    margin:0 11px;
    padding:5px 0;

}

#menu ul li a {
    color:#666666;
    text-align:center;
    font-size:11px;
    display:block;
    line-height:1em;
    height:30px;

}

As you can see in the second li, there is a linebreak. What I need is all the items to line up on the bottom, however, I can't use the width element.

Any help would be appreciated... javascript, jquery, are acceptable alternatives as well.

See http://jsfiddle.net/HKAn2/1/ for the updated CSS and sample.

Updated fiddle sample with proper IE7 support: http://jsfiddle.net/HKAn2/3/.

I do not recommend using the CSS hacks in this fiddle example. Instead use an IE7 specific stylesheet to add the asterisked properties. This is just a sample.

Note the changes to

#menu ul li {
    display:inline-block; /* this */
    margin:0 11px;
    padding:5px 0;
    *display:inline; /* this  - IE7 */
    *zoom:1; /* this - IE7 */
}

and

#menu ul li a {
    color:#666666;
    text-align:center;
    font-size:11px;
    line-height:1em;
    vertical-align:bottom; /* this */
}

Hope this helps.

Edit:

I should further explain that the height property on your a element is no longer a requirement. The a will align to the bottom of the li element based on the li with the largest height.

as you appear to know the height (or optimal height) you could use the length value of vertical-align from vertical-align specs:

<length>

Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'

and if you make your <a> elements into inline blocks you then lower them by half the height, e.g. as below I took your height value of 30px, and made the links have a line height of 15px for each line then lowered it by 15px, which is 15px from the default middle point.

#menu {
    margin: 40px auto 0px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    font-weight: bold;
    font-variant: normal;
    color: #666666;
    float: right;
    width:600px;
    background: #eee;
}

#menu ul {
    list-style:none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    float: left;
    margin: 0 11px;
    height: 30px;
    background: #dad;
}

#menu ul li a {
    color:#666666;
    text-align:center;
    display: inline-block;
    vertical-align: -15px;  
    line-height: 15px;
}

Working Example : HERE

downside is that I don't think you can get the whole 30px height hoverable, ike if the link was display:block, but maybe someone can expand on this if that's required, maybe it could be achieved by adding a span into the mix?