gesteves/Animated menu example

## Animated menu example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
	li {
		list-style-type:none;
		position:relative;
		width:109px;  /* Gives the li the same height and width as the first frame */
		height:46px;
		background:url('http://www.szkolazdusza.com/images/menu-item01-bkg.jpg') top left no-repeat;
		text-indent:-10000px;  /*Hides the menu item text way to the left*/
	}

	li span {  /* Places the span of the same dimensions right on top of the li */
		display:block;
		width:109px;
		height:46px;
		position:absolute;
		top:0;
		left:0;
		background:url("http://www.szkolazdusza.com/images/menu-item01-bkg.jpg") 0 -414px no-repeat;  /* Offsets the image 414px to the top, so it's actually the last frame in the image */
		z-index:1;
		opacity:0; /* Makes it transparent until you hover over it */
		filter:alpha(opacity = 0);  /* For IE compatibility; it doesn't support opacity */
		-webkit-transition: opacity 0.25s linear;  /* Tells WebKit how you want the transition */
	}

	li span:hover {  /* Makes the span visible when you hover it, animated according to the -webkit-transition property */
		filter: alpha(opacity = 100);
		opacity:1;
	}
	</style>
</head>
<body>
	<ul>
	<li>Menu Item<span></span></li>
	</ul>
</body>
</html>