Need help approaching a complex horizontal nav

Hi all,

Please see the following page in progress. Specifically, I'm working on the horizontal navigation bar that overlays the large photo.

http://www.myhomefront.tv/clients/gephardt/build/help.html

I'm trying to move the text down so the text sits along the bottom of the ul container. I'd also like to get the 1px right border on the li elements to stretch to the top and bottom of the ul. (see attached).

Any thoughts on how I can accomplish this? Also, I'd like to do a roll-over on the whole li element. But since the a tag is nested in the li, I'm not sure how to do it.

Here's my code:

HTML:

Untitled Document

window.onload=function(){
Nifty("div#container","small");
}

@import "css/home.css";
@import "css/niftyCorners.css";

• Home
• Services
• Team
• Partners
• Clients

The content will be dynamically loaded in here -->

© 2007 The Gephardt Group | 2496 Jett Ferry Road, Suite 102, Atlanta, GA 30338 | 877.437.4770

And the CSS:

* { margin: 0px; padding: 0px; }

html {
background-color: #c3d0d8;
}

body {
background-color: #c3d0d8;
width: 960px;
margin: 10px auto;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

img {
border: none;
}

#container {
width: 960px;
background-color:#475f77;
text-align: left;
}

#container ul.links {
text-align: right;
list-style: none;
font-size: 11px;
font-weight: bold;
text-transform: lowercase;
padding: 5px 5px 5px 0;
}

#container ul.links li {
padding-right: 15px;
padding-left: 10px;
display: inline;
}

#container ul.links li a {
color: #fff;
text-decoration: none;
}

#container ul.links li a:hover {
color: #c3d0da;
}

#container #main {
width: 960px;
border-top: 1px solid #fff;
overflow: auto;
background-color: #fff;
}

#container #main #leftCol {
width: 303px;
float: left;
border-right: 1px solid #fff;
}

#container #main #leftCol #logo {
background-color: #60899f;
height: 130px;
width: 303px;
text-align: center;
}

#container #main #leftCol #logo h1 {
position: absolute;
left: -9999px;
}

#container #main #leftCol #logo p {
color: #fff;
padding-top: 50px;
}

#container #main #leftCol #content {
margin: 15px 10px 0 10px;
font-size: 16px;
color: #475f77;
}

#container #main #leftCol #content h2 {
color: #ff6100;
font-size: 16px;
font-weight: bold;
}

#container #main #leftCol #content p {
margin-top: 10px;
line-height: 22px;
}

#container #main #centerContent {
width: 656px;
float: left;
}

#container #main #centerContent ul#navBar {
text-align:left;
position:relative;
z-index: 3;
font-size: 13px;
height: 51px;
background: url(../images/blue-nav-bg.png) repeat-x;
}

#container #main #centerContent ul#navBar li {
display:inline;
border-right: 1px solid #c3d0d8;
background: url(../images/yellow-bar.png) no-repeat;
background-position: 100% 0;
height: 100%;
}

#container #main #centerContent ul#navBar li a span {
padding-left: 20px;
}

#container #main #centerContent img#slideshow {
position: relative;
top: -61px;
}

#container #main #learnMore {
clear: both;
background-color: #edead7;
overflow: auto;
.height: 1%;
.padding-bottom: 12px;
}

#container #main #learnMore h3 {
background-color: #dad7c6;
color: #ff6100;
text-transform: uppercase;
font-size: 14px;
padding: 3px 0 3px 303px;
}

#container #main #learnMore ul {
padding-left: 303px;
}

#container #main #learnMore ul li {
display: block;
float: left;
background-color: #c3d0d8;
height: 100px;
width: 115px;
margin: 10px;
}

#container #main #learnMore ul li a span {
display: block;
padding-top: 80px;
}

p#contact {
font-size: 11px;
color: #fff;
margin-top: 7px;
}