how to position links at the bottom in a fixed height list

Question

Hi,

I would like to have a menu with an height of 100px with separators. I've put my menu in a unordered list and added a border-right to the li. So far so good but I can't find how to align my links at the bottom ?

HTML

<div id="menu">
   <ul>
      <li id="logo"></li>
      <li><a href="#item-1" class="first">Item 1</a></li>
      <li><a href="#item-2">Item 2</a></li>
      <li><a href="#item-3">Item 3</a></li>
      <li><a href="#item-4">Item 4</a></li>
      <li><a href="#item-5">Item 5</a></li>
   </ul>
</div>

CSS

#menu {
    background:#5a5a5a;
    height:100px;
    left:0px;
    position:fixed;
    top:50px;
    width:100%;
}
#menu ul {
    list-style-image: none;
    list-style-type: none;
    margin:0px;
}
#menu li {
    border-right:1px solid #c6c6c6;
    display:inline-block;
    height:100px;
}
#menu ul li a {
    color:#fff;
    line-height:100px;
    margin:0 10px;
    padding:0 15px;
    text-decoration:none;
    vertical-align:bottom;
}
#menu ul li a:hover {
    background:#c6c6c6;
    color:#fff;
}

Thanks

Answer 1

#menu li {
    border-right:1px solid #c6c6c6;
    display:inline-block;
    height:20px;
    padding-top:80px
}
#menu ul li a {
    color:#fff;
    line-height:20px;
    margin:0 10px;
    padding:0 15px;
    text-decoration:none;

Answer 2

I've always disliked the inline-block method, so I'm using floats for this instead. See if this is what you want (I've taken the liberty of making the anchors expand out to the size of the list items). http://jsfiddle.net/gSMVA/

The code:

#menu {
    background: #5a5a5a;
    height: 100px;
    left: 0px;
    position: fixed;
    top: 50px;
    width: 100%;
}

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

#menu li {
    border-right: 1px solid #c6c6c6;
    height: 100px;
    float: left;
}

#menu ul li a {
    color:#fff;
    padding: 0 25px;
    height: 100px;
    display: block;
    text-decoration:none;

    /* Height * 2 - font size */
    line-height: 188px;
    font-size: 12px;
}

#menu ul li a:hover {
    background: #c6c6c6;
    color: #fff;
}