CSS strangeness.

I have some CSS strangeness on http://localbuz.com/brod/.

The Top menu has a container
<div class="menu-main">
</div>

Within these is a series of menus: Home, Contact Us, etc.

<div class="menu-main">
<ul><li>
<a href="news">News</a>
<a href="pre-owned-boats">Pre-Owned Boats</a>
<a href="new-boats">New Boats in Stock</a>
<a href="marina-riviera">Marina Riviera</a>
<a href="contact">Contact Us</a>
<a href="home">Home</a>
<a href="?q=user">Log in</a>
</li></ul>
</div>

.menu-main {
background-image: url(../images/menu-shadow.jpg);
background-repeat: no-repeat;
background-position:bottom;
padding-top: 11px;
position: relative;
margin: 0 auto;
width: 865px;
height: 31px;
text-align: center;
}
.menu-main ul {
padding-left: 0px;
margin-left: 0px;
}
.menu-main ul li {
display: inline;
}
.menu-main ul li a {
padding: 8px 15px 8px 15px;
color: #74571e;
font-size: 11px;
text-decoration: none;
}
.menu-main ul li a:hover{
padding: 8px 15px 8px 15px;
font-size: 11px;
color: #d0c6b2;
text-decoration: none;
}

The menu-main container has a height of 31px, yet all the menu items are rendered below this.

How can I fix it so that the Menu Text is above the menu-shadow.jpg?