CSS Code 

#menu_007{width:100%;}
#menu_007 ul{list-style:none;}
#menu_007 li{list-style:none;display:block;float:left;}
#menu_007 li a{display:block;float:left;height:66px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:bold;background:url(http://cssmenus.googlepages.com/menu_007_left.jpg) no-repeat left;line-height:43px;
padding:0 0 0 7px;text-decoration:none;}
#menu_007 li a span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right.jpg) no-repeat right;height:66px;color:#fff;line-height:43px;padding:0 14px 0 6px;}
#menu_007 li a:hover{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_left_h.jpg) no-repeat left;height:66px;}
#menu_007 li a:hover span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right_h.jpg) no-repeat right;color:#fff;height:66px;}
#menu_007 li a.current{display:block;float:left;height:66px;color:#fff;text-transform:uppercase;font-size:11px;font-weight:bold;background:url(http://cssmenus.googlepages.com/menu_007_left_h.jpg) no-repeat left;line-height:43px;padding:0 0 0 7px;text-decoration:none;}
#menu_007 li a.current span{display:block;float:left;background:url(http://cssmenus.googlepages.com/menu_007_right_h.jpg) no-repeat right;height:66px;color:#fff;line-height:43px;padding:0 14px 0 6px;}


HTML CODE

<div id="menu_007">
	<ul>
		<li><a href="#" class="current"><span>home</span></a></li>
		<li><a href="#"><span>about us</span></a></li>

		<li><a href="#"><span>services</span></a></li>
		<li><a href="#"><span>solutions</span></a></li>
		<li><a href="#"><span>contact us</span></a></li>								
	</ul>
</div>

http://www.styledmenus.com

Glossy slide door black menu with blue hover styled which can be used on white backgrounds

Glossy Slide Menu

css, download, free

CSS