Hey all! Well, I'm having another problem:

I'm trying to get my navbar to look like this:



And well...it's not. I want the numbers ( 01, 02, 03, 04, 05 ) to just be markers that dont do anything, and I want the words ( item 1, item 2, etc... ) the be links. This is my code so far:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Stupid Nav Won't Work!
</title>

<style type="text/css">

body {
	margin: 0px;
	padding: 0px;
}

#nav {
	position: absolute;
	right: 4px;
	top: 4px;
}

#ul {
	list-style-type: none;
	text-align: center;
}

#nav ul li {
	border-left: 1px solid #666;
	display: inline;
	padding: 4px;
	width: 80px;
}

#nav ul li ul {
	display: block;
	float: left;
}

#nav ul li a {
	line-height: 18pt;
}

#nav ul li .number {
	color: #666;
	font: small-caps 14pt/15pt arial, verdana, helvetica, sans-serif;
}

#nav ul li .word {
	font: small-caps 9pt/10pt arial, verdana, helvetica, sans-serif;
}

#nav ul li a {
	color: #666;
	text-decoration: none;
}

#nav ul li a:hover {
	color: #222;
	text-decoration: none;
}

</style>

</head>
<body>

<div id="nav">
<ul>
 <li><span class="number">01</span> <span class="word"><a href="#">Item 1</a></span></li>
 <li><span class="number">02</span> <span class="word"><a href="#">Item 2</a></span></li>
 <li><span class="number">03</span> <span class="word"><a href="#">Item 3</a></span></li>
 <li><span class="number">04</span> <span class="word"><a href="#">Item 4</a></span></li>
 <li><span class="number">05</span> <span class="word"><a href="#">Item 5</a></span></li>
</ul>
</div>

</body>
</html>
Gah, I'm so confused.