Problema para criar menu dropdown com css

Front-end
#1

Ola,

Criei um menu drpdown apenas usando html/jsf e css, o problema é que a segunda camada esta se movimentando conforme a resolução, quanto maior a resolução da tela mais para a esquerda da tela o menu vai andando.

HTML

	<div id="wrapper">
		<div id="header">
			<div id="logo">
				<h1>
					<a href="principalAdmin.jsf" target="_blank"><img src="images/logo.png" alt="Prazer!" /></a>
				</h1>
			</div>
		</div>
		<!-- end #header -->
		<div id="menu">
			<ul>
				<li class="currentPrincipal"><h:outputLink value="principal.jsf" action="principal" ajax="false">Home</h:outputLink></li>
				<li class="currentQuemSou"><h:outputLink value="quemsou.jsf" action="quemsou" ajax="false">Quem sou eu</h:outputLink></li>
				<li class="currentProdutos"><h:outputLink value="#" action="#" ajax="false">Produtos</h:outputLink>
					<ul>
						<li class="bolos"><h:outputLink value="produtosBolos.jsf" action="produtosBolos" ajax="false">Bolos</h:outputLink></li>
						<li class="brigadeiros"><h:outputLink value="produtosBrigadeiros.jsf" action="produtosBrigadeiros" ajax="false">Brigadeiros</h:outputLink></li>
						<li class="cupcakes"><h:outputLink value="produtosCupcakes.jsf" action="produtosCupcakes" ajax="false">Cupcakes</h:outputLink></li>
						<li class="bemcasados"><h:outputLink value="produtosBemCasados.jsf" action="produtosBemCasados" ajax="false">Bem-Casados</h:outputLink></li>
						<li class="biscoitos"><h:outputLink value="produtosBiscoitos.jsf" action="produtosBiscoitos" ajax="false">Biscoitos</h:outputLink></li>
						<li class="geleias"><h:outputLink value="produtosGeleias.jsf" action="produtosGeleias" ajax="false">Geléias</h:outputLink></li>
						<li class="macarons"><h:outputLink value="produtosMacarons.jsf" action="produtosMacarons" ajax="false">Macarons</h:outputLink></li>
						<li class="pascoa"><h:outputLink value="produtosPascoa.jsf" action="produtosPascoa" ajax="false">Páscoa</h:outputLink></li>
					</ul></li>
				<li class="currentEventos"><h:outputLink value="eventos.jsf" action="eventos" ajax="false">Eventos</h:outputLink></li>
				<li class="currentWork"><h:outputLink value="whorkshop.jsf" action="whorkshop" ajax="false">WorkShop's</h:outputLink></li>
				<li class="currentContato"><h:outputLink value="contato.jsf" action="contato" ajax="false">Contato</h:outputLink></li>
			</ul>
		</div>
		<div id="banner">
			<img src="images/topo.jpg" width="1000" height="334" alt="" />
		</div>
		<div id="welcome">
			<ui:insert name="conteudo"> Espaço para o conteúdo da tela </ui:insert>
		</div>
	</div>

CSS

/** MENU */
#menu {
	overflow: hidden;
	width: 1000px;
	background: #ffc90d;
	font-size: 20px;
	color: #000000;
}

#menu ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
}

#menu a {
	display: block;
	padding: 15px 40px 15px 40px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: 200;
	color: #FFFFFF;
	border: none;
}

#menu li a {
	color: #333;
	text-decoration: none;
	padding: 5px 10px;
	display: block;
}

#menu li a:hover {
	background: #000;
	color: #fff;
	-moz-box-shadow: 0 3px 10px 0 #000;
	-webkit-box-shadow: 0 3px 10px 0 #000;
	text-shadow: 0px 0px 5px #fff;
}

#menu li ul {
	position: relative;
	top: 52%;
	left: 45%;
	background-color: #ffc90d;
	font-size: 16px;
	color: #000000;
	display: none;
}

#menu li:hover ul,.menu li.over ul {
	display: block;
}

#menu li ul li {
	border: 1px solid #c0c0c0;
	display: block;
	width: 130px;
}

/* Fix IE. Hide from IE Mac \*/
* html #menu ul li {
	float: left;
	height: 1%;
}

* html #menu ul li a {
	height: 1%;
}
/* End */

Algém pode me ajudar a resolver isso??? :smiley:

Obrigado

#2