centered ul nav with dropdowns.css

		<style>
	
		#body	
		div { width:960px; padding:100px 0; margin:0 auto; font-family:Calibri, sans-serif; }
		#nav
		div{
			border:1px solid #ccc;
			border-width:1px 0;
			list-style:none;
			margin:0;
			padding:0;
			text-align:center;
		}
		#nav:li
		div{
			position:relative;
			display:inline;
		}
		#nav:a
		div{
			display:inline-block;
			padding:10px;
		}
		#nav:ul
		div{
			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
		div{
			display:block;
		}
		#nav li:hover:ul
		div{
			align-left:0;
		}
		#nav li:hover:a
		div{
			text-decoration:underline;
			background:#f1f1f1;
		}
		#nav li:hover:ul:a
		div{
			text-decoration:none;
			background:none;
		}
		#nav li:hover ul a:hover
		div{
			text-decoration:underline;
			background:#f1f1f1;
		}
		#nav:ul:a
		div{
			white-space:nowrap;
			display:block;
			border-bottom:1px solid #ccc;
		}
		#a
		div{
			color:#c00;
			text-decoration:none;
			font-weight:bold;
		}
		#a:hover
		div{
			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>