Probleminha com menu DropDown

[leobhbot 0]

Olá Pessoal do Imasters,

 

Não sou muito profissional no CSS, desenvolvo sites a pouco tempo, estou com um problema em um site de paróquia que estou desenvolvendo para minha cidade.

 

Vejam a imagem abaixo:

 

 

Esse menu Dropdown, ele devia ta na vertical, não na horizontal =/

 

Veja o código do mesmo, ta bem simples de entender. (o menu selecionado na imagem acima é o Paroquia, ainda não fiz um hover rs)

 

HTML:

<div id="header_menu">
       	<ul>
           	<li><a href="index.php?pg=home">Página Inicial</a></li>
               <li><a href="#">Paróquia</a>
               	<ul>
                   	<li><a href="index.php?pg=paroco">Paroco</a></li>
                       <li><a href="index.php?pg=secretaria_paroquial">Secretaria Paroquial</a></li>
                       <li><a href="index.php?pg=historico">Histórico</a></li>
                       <li><a href="index.php?pg=centro_pastoral">Centro Pastoral</a></li>
                       </ul>

               </ul>
     </div><!-- fecha div header_menu -->                 

 

O código é maior que esse, tem vários outros menus, mas acho bestera postar todo o código do menu, uma vez que é tudo a mesma coisa e solucionando o problema em um, soluciona em todos.

 

Segue abaixo o código CSS de todo o menu:

#header_menu{width:999px; height:35px; background:url(../imagens/bg-menu.jpg) no-repeat;}
#header_menu ul{list-style:none; padding:0px; margin:0px; position:relative;}
#header_menu ul li{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; display:inline; float:left;}
#header_menu ul li a{color:#FFF; text-decoration:none; padding:8px 16px; float:left; margin-left:24px; font-weight:bold;}
#header_menu ul li a:hover{cursor:pointer; color:#C90;}
#header_menu ul li ul{display:none; position:absolute; padding:35px 0; float:left;}
#header_menu ul li ul li{background:#930; font-size:12px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; float:left;}
#header_menu ul li:hover ul{display:block; float:left;}

 

 

O fato deu ter colocado display:block no hover ul, eu achei que ia exibir e quebrar o menu ficando de maneira vertical (inclusive aprendi isso em uma video aula) mas não foi bem isso que aconteceu =/

 

Alguém poderia me ajudar a identificar este erro ? Acho que é alguma coisa bastante simples.

 

Muito obrigado!

[André D. Molin 15]

Você está dando um float: left; nas li's que estão dentro do submenu. É por isso que o submenu está na horizontal.

[leobhbot 0]

Você está dando um float: left; nas li's que estão dentro do submenu. É por isso que o submenu está na horizontal.

 

Olá André, obrigado pela resposta.

 

Retirei o float:left, realmente o menu quebrou pra vertical, o problema é que ele não pegou a cor de backgrounde de fundo que eu coloquei, ele pegou a formatação das letras mais não a do fundo, ou seja, o menu se expande mais fica com fundo totalmente transparente, não pega a formatação do Background, só aparece os links.

 

E no caso, a abertura do submenu não acompanha o mesmo espaçamento do menu, ou seja, ele sempre se abre la no canto esquerdo da página ao inves de abrir exatamente em baixo do menu responsável.

 

Porque será que isso aconteceu ?