A basic navigation list using <ul> and CSS for markers

Should work on a modern browser (Firefox 4, Safari 5/Chrome (Webkit), IE9/8).

nav item
nav item2
nav item3
nav item3

The HTML:


		<ul id="nav">
		<li class="active"><a href="#1">nav item</a></li>
		<li><a href="#2">nav item2</a></li>
		<li><a href="#3">nav item3</a></li>
		<li><a href="#4">nav item3</a></li>
	</ul>

The CSS:


		
#nav {
	margin: 0; padding: 0;
	display: block; 
	overflow: hidden;
}

#nav li {
	float: left;
	margin: 0; padding: 0 10px 10px;
	position: relative;
}

#nav li a {
	display: block;
}

#nav li.active a:after,
#nav li a:hover:after {
	content: "";
	display: block;
	margin: 0 auto; width: 0;
	border: 5px solid red;
	border-color: transparent transparent red transparent;
}