Tutorial Web Design

<header>
		<h1>Robot <small>HTML5 Audio on Menu</small></h1>
		<p>A robot is a mechanical or virtual artificial agent, usually an electro-mechanical machine that is guided by a computer program or electronic circuitry... <a href="http://en.wikipedia.org/wiki/Robot">read more..</a> </p>
		<aside>
			<p>
				* Demo of using HTML5 Audio on a menu, tutorial by <a href="http://www.tutorial-webdesign.com">Tutorial-webdesign.com</a> |
				Follow twitter <a href="http://www.twitter.com/tut_web">@tut_web</a> ,
				Image  by <a href="http://www.flickr.com/photos/takoyaki_king/8186641411/sizes/l/in/photostream/">Takoyaki_King</a>
			</p>
		</aside>
</header>

<nav>
	<ul>
		<li><a href="#">About Robot</a></li>
		<li><a href="#">Back to Tutorial</a></li>
		<li><a href="#">Download</a></li>
	</ul>
	<audio id="soundBeep" preload="auto">
			<source src="beep.mp3"></source>
			<source src="beep.ogg"></source>
	</audio>
</nav>

	var soundBeep = $("#soundBeep")[0];
	$("nav a").hover(function() {
		soundBeep.play();
	}, function(){
		soundBeep.pause();
	});

body{
	background: url(robot.jpg);
	background-size: cover;
}

nav{
	padding:10px 40px;
	width: 400px;
}

nav ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

nav ul li {
	display: block;
	padding: 10px;
}
nav ul li a{
	background: transparent;
	padding:20px;
	display: block;
	text-transform: uppercase;
	font-size: 20px;
	font-style: italic;
	color: #ddd;
	border-radius: 6px 0 0 6px;
}
nav ul li a:hover{
	background: -webkit-linear-gradient(left, rgba(248,207,119, .4), transparent);
	background: -moz-linear-gradient(left, rgba(248,207,119, .4), transparent);
	background: -o-linear-gradient(left, rgba(248,207,119, .4), transparent);
	background: -ms-linear-gradient(left, rgba(248,207,119, .4), transparent);
	background: linear-gradient(left, rgba(248,207,119, .4), transparent);
}