CSS Horizontal Menu (2)

Using the same color scheme as CSS Horizontal Menu (1), I have decided to make a couple of changes. The first menu only had an under line as a mouse over action, this time we change the background of the menu.
Also, I have made this menu rounded and with a blue border, the last one had straight line borders.

Instead of a 1 px background 2 tone image as a background set to run across the width of the page, I have made the background, complete with border, 1 long image, and set this length to the width allocated for it in the page.

Other than that you'll see the code is quite similar to the previous menu.

Here is the css:
/* Menu */
#menu {height:31px;background:url(../images/background_menu.jpg) no-repeat;
width:760px;clear: both;}
#menu ul {list-style:none;}
#menu li {height:31px;display:block;float:left;
background:url(../images/submenu_divider.jpg) no-repeat right top;z-index:20;}
#menu li a {
font-family:Geneva, Arial, Helvetica, sans-serif;color:#266181;text-decoration:none;
font-size:12px;font-weight:bold;padding:8px 30px 6px 30px;display:block;}
#menu li a:hover {border-top:1px solid #6591ac;
background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;
padding:7px 30px 6px 30px;}

HTML:
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="mission.html">Mission</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="services.html">Services/Fees</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>