Vertical align text inside a drop down menu

Maybe it’s because I’m no drop down menu newbie, but this aspect of [url=http://www.nadamt.xmgfree.com/hub.php]my site[/url] has been the most troublesome (besides the abandoned iframe). I’m trying to manipulate the text inside the dropdown menu (hover over the “log” and “works” link) so that it stands on the bottom right hand corner on the box rather than the upper right corner. I’ve tried using vertical-align: bottom, vertical-align: text-bottom, and just plain bottom, and have gotten no where. It’s possible, likely even, that I put either one of those properties out of place. Could someone provide the correct sequence?

Here’s my stylesheet:

[code]html, body{ height: 100%; width: 100%; margin: 0px; padding: 0px; }
body{ background-color: rgb(255,255,255); color: rgb(255,255,255); font-family: “tempus sans itc”, “trebuchet ms”, sans-serif; font-size: 20px; font-weight: 500; letter-spacing: 1.25px; text-align: left; word-spacing: 2px; }
p { margin: 0px; padding: 0px 0px 15px 0px; }

/*Containers*/
#interface { position: absolute; left: 50%; top: 50%; width: 984px; height: 500px; margin-left: -492px; margin-top: -250px; padding: 0px; }
#background { position: absolute; top: 30px; left: 0px; width: 984px; height: 440px; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
#threshold {position: absolute; overflow: hidden; width: 100%; height: 100%; background: transparent; }
#content { position: absolute; z-index: 1; background: transparent; padding: 30px 0px 30px 0px; }

/*Header and footer:*/
.a2, .a4, .a6, .a7, .a8, .a9, .b1, .b2, .b3, .b4, .b5, .b6, .b8 { position: absolute; margin: 0px; padding: 0px; background-image: none; height: 26px; z-index: 3; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
.a2, .a4, .a6, .a7, .a8, .a9 { top: 0px; }
.b1, .b2, .b3, .b4, .b5, .b6, .b8 { bottom: 0px; }
.a7, .a9, .b1, .b3, .b5 { width: 160px; }
.a2, .a4, .a6, .a8, .b2, .b4, .b6, .b8 { width: 40px }
.hub, .log, .works, .info, .net { position: absolute; margin: 0px; padding: 0px; }
.hub { top: 0px; left: 0px; }
.a2 { left: 163px; }
.log { top: 0px; left: 206px; }
.a4 { left: 369px; }
.works { top: 0px; left: 412px; }
.a6 { left: 575px; }
.a7 { left: 618px; }
.a8 { left: 781px; }
.a9 { left: 824px; }
.b1 { left: 0px; }
.b2 { left: 163px; }
.b3 { left: 206px; }
.b4 { left: 369px; }
.b5 { left: 412px; }
.b6 { left: 575px; }
.net { bottom: 0px; left: 824px; text-align: right; }
.b8 { left: 781px; }
.info { bottom: 0px; left: 618px; text-align: right; }

/*Drop down menu:*/
ul, li ul, ul li a, li ul a { color: rgb(255,255,255); font-weight: bold; text-decoration: none; padding: 0px; margin: 0px; filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; position: relative; z-index: 2; }
ul { list-style: none; width: 160px; }
li ul { position: relative; width: 160px; display: none; }
li ul a, ul li a { display: block; }
li:hover ul, ul li a:hover { display: block; text-align: right; }
ul li a:hover { width: 160px; text-align: left; }
li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; } [/code]

Thanks in advance.

Also in #CSS _↴