a width and height 100% and text still at the bottom right - possible?

Question

I'm creating tiled nav and what I need is for a to fill the tile, but the text from a still be located at bottom right position. However, when I make it width:100% and height:100% (in relation to li), the text jumps to top left of the area. I know why this happens, I think I understand the whole idea, what I don't know is how to force it to jump back to bottom right while still filling the tile.

Here's the code:

    #menu {
width: 900px;
float: right;
display: block;
margin:0;
padding:0;
}


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

#menu ul li{
display:inline-block;
width: 146.5px;
height: 146.5px;
background-color: #1BA1E2;
position: relative;
}

#menu ul li a{
text-decoration: none;
color: #fff;
display: block;
padding-right:5px;
padding-top:5px;
width: 100%;
height: 100%;

and the html:

      <div id="menu">
           <ul>
                <li><a href="#">pies</a></li>
                <li><a href="#">kot</a></li>
                <li><a href="#">czołg</a></li>
                <li><a href="#">ryba</a></li>
                <li><a href="#">yea</a></li>
                <li><a href="#">umc</a></li>

           </ul>
      </div>

Answer 1

Make your li display: table-cell instead of inline-block; and use vertical-align: bottom

Demo

#menu ul li {
    width: 146.5px;
    height: 146.5px;
    background-color: #1BA1E2;
    position: relative;
    vertical-align: bottom;
    display:table-cell;
    text-align: right;
    border: 1px solid #000;
}

Note: Your CSS is lil messy so clean up a bit