Drop Down Menu com CSS

C

candycane

Power Member
Boa tarde comunidade!

Eu tou a tentar fazer um Drop Down Menu com css e ta a sair-me tudo torto :(

Já andei a pesquisar mas não encontro solução...
O submenu n me aperece debaixo do menu "pai", aparece ao lado...


Este é o meu codigo CSS:
em que o #menus é o id da div que contem a lista toda e a class submenu é a class do submenu...

/* .... M E N U P R I N C I P A L .... */
#menus{
 position:relative;
display:block;
height:39px;
font-size:11px;
font-weight:bold;
background:transparent url(imagens/bg_out.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
border-top:4px solid #B30000;
}

#menus ul{
 margin:0;
padding:0;
list-style-type:none;
width:auto;
}

#menus ul li{
display:block;
float:left;
margin:0;
}

#menus ul li a{
 display:block;
float:left;
color:#666;
text-decoration:none;
padding:11px 20px 0 20px;
height:23px;
background:transparent url(imagens/bg_div.gif) no-repeat top right;
}

#menus ul li a:hover{
 color:#B30000;
background:#fff url(imagens/bg_over.gif) no-repeat top right;
}

#menus li {
position: relative;
}

/* ....... S U B M E N U .......*/
#menus ul ul{
 position: absolute;
list-style-type: none;
display:none;
height:auto;
background-color: #fff;
border: #000 solid 1px;
color: #000;

}

#menus ul li:hover ul{
display:block;
float:left;
margin:0;
}


alguem pode ajudar-me?
Estive desde manhã ate agora a tentar resolver isto... :(
 
Código: 
<div id="menus">
        <ul id="menu_horizontal">
          <li><a href="#">Home</a></li>
          <li><a href="#">Serviços</a></li>
          <li><a href="#">Soluções</a></li>
         <ul class="submenu">            
            <li><a href="#">Recursos Humanos</a></li>
            <li><a href="#">Armazenamento Card</a></li>
            <li><a href="#">Sistemas Móveis</a></li>            
            <li><a href="#">Gestão de Qualidade</a></li>
          </ul>
          <li><a href="#">Sobre Nos</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </div>

:)
 
o problema ai e muito simples, e está aqui:

#menus ul li:hover ul{

isso procura uma lista que esteja DENTRO de um item de outra lista em hover. só que o teu-submenu não está dentro do item do menu correspondente. resumindo, onde tens isto:

Código: 
<li><a href="#">Soluções</a></li>
<ul class="submenu">            
   <li><a href="#">Recursos Humanos</a></li>
   <li><a href="#">Armazenamento Card</a></li>
   <li><a href="#">Sistemas Móveis</a></li>            
   <li><a href="#">Gestão de Qualidade</a></li>
</ul>

passa a ser:
Código: 
<li><a href="#">Soluções</a>
   <ul class="submenu">            
      <li><a href="#">Recursos Humanos</a></li>
      <li><a href="#">Armazenamento Card</a></li>
      <li><a href="#">Sistemas Móveis</a></li>            
      <li><a href="#">Gestão de Qualidade</a></li>
   </ul>
</li>
 
Inicie sessão ou registe-se para poder participar.
Back
Topo