menu {padding-bottom:35px;}
menu li{
	margin: 0;
	padding: 0;
	overflow: hidden;  /*--Important - Masking out the hover state by default--*/

	height:33px;
	width:200px;
}
menu a, menu span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
	padding-left:30px;
	padding-right:15px;
	 display:block;
	text-decoration: none;
	text-transform:uppercase;
	background: url(../images/bg-menu.jpg) no-repeat;
	cursor:pointer;
	clear: both;
	width: 100%;
	height: 34px;
	line-height: 34px; /*--Vertical alignment of text--*/
}
menu a , menu li.active  * { /*--This is basically the hover state of navigation--*/
	color:#FFF;
	background-position: left bottom;
}
menu span { /*--Default state of navigation--*/
	background-position: left top;

}

menu a:hover  {
	color:#FFF;
}