centered ul nav with dropdowns

centered ul nav with dropdowns

		<style>
	
		body	{ width:960px; padding:100px 0; margin:0 auto; font-family:Calibri, sans-serif; }
		#nav{
			border:1px solid #ccc;
			border-width:1px 0;
			list-style:none;
			margin:0;
			padding:0;
			text-align:center;
		}
		#nav li{
			position:relative;
			display:inline;
		}
		#nav a{
			display:inline-block;
			padding:10px;
		}
		#nav ul{
			position:absolute;
			/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
			left:-9999px;
			margin:0;
			padding:0;
			text-align:left;
		}
		#nav ul li{
			display:block;
		}
		#nav li:hover ul{
			left:0;
		}
		#nav li:hover a{
			text-decoration:underline;
			background:#f1f1f1;
		}
		#nav li:hover ul a{
			text-decoration:none;
			background:none;
		}
		#nav li:hover ul a:hover{
			text-decoration:underline;
			background:#f1f1f1;
		}
		#nav ul a{
			white-space:nowrap;
			display:block;
			border-bottom:1px solid #ccc;
		}
		a{
			color:#c00;
			text-decoration:none;
			font-weight:bold;
		}
		a:hover{
			text-decoration:underline;
			background:#f1f1f1;
		}
		
	</style>
	
	
	
	<ul id="nav">
	
		<li><a href="/">Home</a></li>
		<li>
			<a href="/about/">About</a>
			<ul>
				<li><a href="#">About me</a></li>
				<li><a href="#">About my work</a></li>
			</ul>
		</li>
		<li>
			<a href="/portfolio/">Portfolio</a>
			<ul>
				<li><a href="#">Web</a></li>
				<li><a href="#">Print</a></li>
				<li><a href="#">Identity</a></li>
			</ul>
		</li>
		<li><a href="/archives/">Archives</a></li>
		<li><a href="/resources/">Resources</a></li>
		<li><a href="/contact/">Contact</a></li>

	</ul>