floating menu met dropdown [CSS]

<header>
		<ul class="navigation">
  			<li><a href="#" id="active">menu1</a></li
  			><li><a href="#">menu2</a>
  			<ul>
  				<li><a href="#">sub1</a></li>
  				<li><a href="#">sub2</a></li>
  				<li><a href="#">sub3</a></li>
  			</ul></li
  			><li><a href="#">menu3</a></li
  			><li><a href="#">menu4</a></li>
		</ul>
		<div class="outer"><div class="inner">
    	    <img src="imgs/quote.png">
	    </div></div>
</header>

header {
			width: 100%;
			
			background-color: #333333;
			
			text-align: center;
			overflow: hidden;
		}
header .navigation {
	background:#005555;
	padding:0;
	margin:0;
	list-style-type:none;
	height:30px;
	z-index: 999999;
}
header .navigation li { float:left; }
header .navigation li a {
	padding:9px 20px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:12px arial, verdana, sans-serif;
}

/* Submenu */
header .navigation ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	list-style-type:none;
}
header .navigation li:hover { position:relative; background:#5FD367; }
header .navigation li:hover ul {
	left:0px;
	top:30px;
	background:#5FD367;
	padding:0px;
}

header .navigation li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#5FD367;
}
header .navigation li:hover ul li a:hover { background:#005555; }


		/* Big quote */
		header .outer {
			width: 100%;
			min-width: 1024px;
			margin: 0 auto; 
			overflow: hidden;
			
			padding: 0;
			margin-bottom: -5px;
		}
		header .inner {
			position:relative;
			float: right;
			right: 50%;
			
			padding: 0px;
			margin: 0px;
		}
		header .inner img {
			position: relative; 
			right:-50%;
			
			height: 300px;
			width: auto;
			
			padding: 0px;
			margin: 0px;
		}