Full css3 navigation

cssFullCss3Navigation.css

/*Eric Meyer’s “Reset CSS” 2.0 CSS Reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
	
html{
	background:-webkit-gradient(radial,  40% 315,  140,  40% 315,  715,  from(#eee),  to(#ccc));
	background:-moz-radial-gradient(24% 315px,  circle,  #eee 140px,  #ccc 415px);
	background-color: #eee;
	height: 100%;
}
body{ 
	font-family: 'helvetica neue', helvetica, arial, sans-serif; 
	font-size: 16px; 
}
header{ 
	margin: 20px auto auto;
	width: 600px; 
}
	
/*Main Navigation*/
#mainNav{ float: right; }
#mainNav ul li{
	float: left;
	margin-left: 20px;
}
#mainNav ul li a{
	background: #817f7f;
	background: -moz-linear-gradient(top,  #aaa 0%, #817f7f 5%, #5e5e5e 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaa),  color-stop(4%,#817f7f), color-stop(99%,#5e5e5e)); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#5e5e5e',GradientType=0 );
	border: 1px solid #474747;
	border-right: none;
	color: #fff;
	font-size: .9em;
	font-weight: bolder;
	margin-left: -20px;
	padding: 6px 10px 6px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	text-decoration: none;
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
}
#mainNav ul li a:hover{
	background: #8e8d8d;
	background: -moz-linear-gradient(top,  #b8b8b8 0%, #8e8d8d 5%, #6c6c6c 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8b8b8),  color-stop(4%,#8e8d8d), color-stop(99%,#6c6c6c)); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8b8b8', endColorstr='#6c6c6c',GradientType=0 );
}
#mainNav ul li:first-child a{
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#mainNav ul li:last-child a{
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

/*Call to Action Navigation items*/
#mainNav .cta a{
	background: #f68e1d;
	background: -moz-linear-gradient(top,  #fcc589 0%, #f68e1d 5%, #dd801a 99%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcc589),  color-stop(4%,#f68e1d), color-stop(99%,#dd801a)); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc589', endColorstr='#dd801a',GradientType=0 );
	border: 1px solid #c37117;
	border-right: none;
	font-weight: bolder;
	margin-left: -20px;
	padding: 6px 10px 6px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#mainNav .cta a:hover{
    background: #fe8015;  
    background: -moz-linear-gradient(top,  #fed1ab 0%, #fe8015 5%, #e77514 99%);
    background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed1ab),  color-stop(5%,#fe8015), color-stop(99%,#e77514)); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fed1ab', endColorstr='#e77514',GradientType=0 ); 
}
#mainNav ul li:last-child.cta a{ border: 1px solid #c37117; }
	
/*Top Navigation*/
#topNav{
	color: #666;
	float: right;
	font-size: .8em;
	margin-bottom: 15px;
}
#topNav li{
	float: left;
	margin-right: 10px;
}
#topNav li:after{
	content: '|';
	padding-left: 7px;
}
#topNav li:last-child:after{
	content: '';
	display: none;
}
#topNav li a{ 
	color: #555; 
	text-decoration: none; 
}
#topNav li a:hover{ text-decoration: underline; }

htmlFullCss3Navigation.css

<header>
	<nav id="topNav">
		<ul>
			<li><a href="#">Company</a></li>
			<li><a href="#">Forums</a></li>
			<li><a href="#">Jobs</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Press</a></li>
			<li><a href="#">Search</a></li>
		</ul>
	</nav>
	<nav id="mainNav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Support</a></li>
			<li><a href="#">Developer Center</a></li>
			<li><a href="#">Interact</a></li>
			<li class="cta"><a href="#">Buy Now</a></li>
			<li class="cta"><a href="#">Demo</a></li>
		</ul>
	</nav>
</header>