[HTML5 - CSS3] Responsive navigation tabs resting at bottom of header element

I am trying to build out a tab based navigation that rests at the bottom of my header element in my web site.  The problem is that I am building it to be a fluid responsive design much like http://joshuasortino.com/.  The problem I have is that my tabs are not resting at the bottom of the header and when I resize my browser it doesn't flow with the rest of the document.  Below is my pertinent code:

HTML:

<header class="pagetop">
	
    <a href="index-html5.php"><img src="../images/template/varasight-logo.png" title="VaraSight Surveillance, A Division Of Feeney Wireless, LLC." alt="VaraSight Surveillance, A Division Of Feeney Wireless, LLC." border="0" class="logo"></a>
    <nav>
    	<ul>
      	<li class="tab"><a href="/">HOME</a></li>
    		<li class="tab"><a href="/">Products</a></li>    
    		<li class="tab"><a href="/">Services</a></li> 
    		<li class="tab"><a href="/">Company</a></li>
    		<li class="tab"><a href="/">Contact</a></li>  
    		<li><a href="http://feeneywireless.com" target="_blank"><img src="../images/template/division-of-feeney-wireless.png" title="A Division Of Feeney Wireless" alt="A Division Of Feeney Wireless" border="0"></a></li> 
    </nav>
</header>

Select allOpen in new window

CSS:

header {
	width: 100%;
	margin: 0;
	padding: 0;
}

.pagetop {
	background: url(../images/template/header-background.png) repeat-x top left #233216;
	margin: 0;
	padding: 0 0 1%;
	height: 14.27%;
	display: block;
	width: 100%;
	position: absolute;
	top: 5%;
}
	
	 .pagetop .logo {
			left: 2.64%;
			width: 25%;
			max-width: 100%;
			margin: 2% 2.64%;
		}

nav {
	margin: 0;
	padding: 0;
	bottom:0;
	width:70%;
	float: right;
}

	nav ul {
		list-style: none;
		width:70%;
		float:right;
		right: 5%;
	}

	nav li {
		list-style: none;
		margin: 0 1%;
		padding: 0;
		float: left;
		right: 5%;
	}
	
	nav a {
		text-decoration: none;
	  color: #FFF;
	}
	
.tab {
	-webkit-border-top-right-radius: 1em;
	-webkit-border-top-left-radius: 1em;
	-moz-border-radius-topright: 1em;
	-moz-border-radius-topleft: 1em;
	border-top-left-radius:1em;
	border-top-right-radius: 1em;
	background: #404040; /* Old browsers */
	background: -moz-linear-gradient(top, #404040 0%, #797979 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#797979)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #404040 0%,#797979 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #404040 0%,#797979 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #404040 0%,#797979 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#797979',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #404040 0%,#797979 100%); /* W3C */
	display: block;
	padding: 0.5% 2%;
	color: #f1f1f1;
	font: 110%/normal 'Francois One', sans-serif;
	text-transform: uppercase;
	border-right: 2px solid #797979;
	border-left: 2px solid #797979;
	border-top: 2px solid #797979;
}

Select allOpen in new window

Thanks in advance for any help you can offer!