CSS Horizontal Menu (1)

Whoa, I've been busy lately so this is my first post in 2 months. I'll put up a couple of horizontal menus I used recently on a few different websites.

This menu is css driven - by a unordered list (as most menus will be on this blog). I use images for background sometimes, but making sure that adding a new menu item at a later date is adding 1 line to the list, instead of having to create on/off images.

There are two images used for
a) the shaded background
b) the item divider,

Here is the css, html and the images are included too.

/** Horizontal Menu **/
#menu {display:block;width:975px;margin:auto; }
#menu ul {list-style:none;background:url(../images/background_menu.jpg) repeat-x;
height:35px;margin:0;padding:0 0 0 10px;font-size:15px;}
#menu ul li {margin-top:2px;float:left;padding:3px 15px 0 15px;background:url(../images/menu_divider.jpg) no-repeat right top;}
#menu ul li a{text-decoration:none;color:#171a29;}
#menu ul li a:hover{text-decoration:underline;}

HTML:
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Events</a></li>
<li><a href="">Advertising</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Directions</a></li>
</ul>
</div>

Images