[Resolvido] Menu drop-down

[crf_h0m3r 5]

Bom galera, tô com um probleminha num menu que fiz para um site de um bar aqui da região.

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:

(Link caso não visualize:

)

 

 

Sem essa largura (ul#navbar li {float:left; position:relative;}) o menu fica certo, porém o submenu não:

(Link caso não visualize:

)

 

Bom galera, aguardo respostas!

Boa tarde.

[Marcos Xavier 189]

Boa tarde. Testa ele com essa

alteração e posta o resultado aí.

 

Altere essa linha:

ul#navbar ul li {margin:0;padding:0;}

 

com isso:

 

#navbar ul li {margin-left:-40px;padding:0;}

 

Provavelmente vai dar certo.

[crf_h0m3r 5]

@Corn flakes

Obrigado, funcionou mesmo. Agora é só ajustar de acordo com o que eu preciso.

 

Imagem:

(Link caso não visualize:

)

[Marcos Xavier 189]

Dica.

No seu css você pode utilizar assim

 

#navbar ul li {margin:0;padding:0;}

 

Isso é o mesmo que :

 

ul#navbar ul li {margin:0;padding:0;}

É bom sempre evitar redundancias.

Até.