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???
Obrigado