A jQuery powered HTML5 navigation menu

This is a simple HTML5 and jQuery powered navigation menu. It uses some simple CSS3 for some minor presentational enchancement (like border-radius and text-shadow).

The purpose behind it's creation was to provide a semantic and easily implemented way of creating simple good-looking site navigation. In that spirit, it's usage is incredibly simple. All you need to do is add (or edit) a class for the HTML5 nav element to change it's colour, like this:

<nav class="red">

After that it's just matter of creating a simple sematic set of lists (and nested lists for drop-downs), everything else is added and styled via jQuery. The following is a simple example:

<nav class="red">
	<ul class="clear">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a>
			<ul>
				<li><a href="#">Branding</a></li>
				<li><a href="#">Print</a></li>
				<li><a href="#">Web</a></li>
				<li><a href="#">Marketing</a></li>
			</ul>
		</li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Our blog</a></li>
		<li><a href="#">Downloads</a></li>
		<li><a href="#">Contact us</a></li>
	</ul>
</nav>