div#menu ul { 
	/* applying some basic styles: turn off the list style, remove any padding that might get in the way. */
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 46px;
}

div#menu ul li ul {
	/* only needed because we want to ignore the child pages in the menu */
	display: none;
}




div#menu ul li {
	/* the left-and-middle button first. It will attach to the list element (LI). */
	float: left;
	background: url(http://i115.photobucket.com/albums/n296/engtechwp/website/left.png) no-repeat left top;
	padding: 10px 0px 12px 10px;
}


div#menu ul li a {
	/* the right button. It will attach to the link anchor within the list element (LI A). */
	background: url(http://i115.photobucket.com/albums/n296/engtechwp/website/right.png) no-repeat top right;
	padding: 10px 25px 12px 10px;

}



/* show the hover effect. This is done by shifting the background image down 46 pixels. We’ll also disable the underline effect by turning off text-decoration. */

div#menu li:hover {
  background-position: 0% -46px;
}


div#menu li a:hover {
	text-decoration: none; 
}


div#menu li:hover a {
	background-position: 100% -46px;  
}