Help
O menu contém:
<div id="topo">
<div id="menu">
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">O Bar</a></li>
<li><a href="#">Cardápio</a>
<ul>
<li><a href="#">Porções</a></li>
<li><a href="#">Bebidas</a></li>
<li><a href="#">Clube do Whisky</a></li>
<li><a href="#">Quentinhas</a></li>
</ul>
</li>
<li><a href="#">Agenda</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Localização</a></li>
<li><a href="#">Fale Conosco</a></li>
</ul>
</div><!-- FIM DA DIV MENU -->
</div><!-- FIM DA DIV TOPO -->
No menu Cardápio, há mais 4 submenus (esse número pode aumentar). Para a visualização do mesmo, usei CSS+jQuery, porém algumas propriedades pra esse menu aparecer quando passo o mouse prejudicam o menu por inteiro.
Propriedade CSS do #menu e do submenu (#navbar):
#topo {margin:5px auto; width:900px; height:50px; background:url(../img/bg-menu.png) repeat;}
#menu {padding:10px;}
#menu ul li {line-height:25px;}
#menu a {padding:0 10px 10px 10px; color:#FFF;}
#menu a:hover {text-shadow: 0px 2px 3px #000;}
ul#navbar ul li {margin:0;padding:0;}
ul#navbar li {float:left; position:relative; width:120px;}
ul#navbar li ul {margin-top:5px; position:absolute; background:#000; display:none;}
ul#navbar li li {padding:5px;}
ul#navbar li li:hover {background:#222;}
Como o menu tem 900px (herdando da div topo), quando coloco uma largura na lista (ul#navbar li {float:left; position:relative; width:120px;}) o menu estoura e fica assim:
http://i.imgur.com/dNoum.png
(Link caso não visualize: http://imgur.com/dNoum)
Sem essa largura (ul#navbar li {float:left; position:relative;}) o menu fica certo, porém o submenu não:
http://i.imgur.com/Wx7hU.png
(Link caso não visualize: http://imgur.com/Wx7hU)
Bom galera, aguardo respostas!
Boa tarde.
