1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Drop Down Menu com CSS

Discussão em 'Web Development' iniciada por candycane, 27 de Junho de 2008. (Respostas: 4; Visualizações: 733)

  1. candycane

    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... :(
     
  2. MPalhas

    MPalhas Power Member

    mostra também o código html do menu (e usa a tag CODE para fazeres isso, já agora)
     
  3. candycane

    candycane Power Member

    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>
     
    
    :)
     
  4. hYpe

    hYpe [email protected] Member

  5. MPalhas

    MPalhas Power Member

    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>
     

Partilhar esta Página