<div id=\"menu\">
    	<div id=\"menu-item\">
    		<ul id=\"top-nav\">
        		<li class=\"about\"><a href=\"#\">About</a></li>
            	<li class=\"work\"><a href=\"#\">Work</a></li>
            	<li class=\"services\"><a href=\"#\">Services</a></li>
            	<li class=\"careers\"><a href=\"#\">Careers</a></li>
            	<li class=\"contact\"><a href=\"#\">Contact</a></li>
            </ul>
        </div>    
    </div>

#menu {
	height: 50px ; 
	background: url(../_images/header_menu.gif) repeat-x ;
}
#menu-items {
	width: 880px ;
	margin: 0 auto ;
}
ul#top-nav {
}
	ul#top-nav li {
		display: inline ;
		}
		ul#top-nav li a {
			display: block ;
			height: 50px ;
			text-indent: -9999px ;
			float:left ;
			}
		ul#top-nav li.about a {
			width: 188px ; 
			background: url(../_images/menu_about.gif) bottom center no-repeat ;
			}
		ul#top-nav li.work a {
			width: 167px ; 
			background: url(../_images/menu_work.gif) bottom center no-repeat ;
			}
		ul#top-nav li.services a {
			width: 168px ; 
			background: url(../_images/menu_services.gif) bottom center no-repeat ;
			}
		ul#top-nav li.careers a {
			width: 168px ; 
			background: url(../_images/menu_careers.gif) bottom center no-repeat ;
			}
		ul#top-nav li.contact a {
			width: 189px ; 
			background: url(../_images/menu_contact.gif) bottom center no-repeat ;
			}
		ul#top-nav li a:hover {
			background-position: center center ;
			}