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

problema menu drop down html css

Discussão em 'Web Development' iniciada por alfinete, 13 de Fevereiro de 2008. (Respostas: 5; Visualizações: 2417)

  1. alfinete

    alfinete Power Member

    codigo HTM:

    Código:
    
        <div class="menuprincipal">
            <div id="menuh-container">
                <div id="menuh">
                    <ul>
                        <li><a href="teste.aspx" target="mostra2" class="top_parent">Home</a></li>
                    </ul>
                    <ul>
                        <li><a href="#" class="top_parent">Bandas</a>
                            <ul>
                                <li><a href="#">---------</a></li>
                                <li><a href="#" class="parent">Dicografias</a>
                                    <ul>
                                        <li><a href="#">Sub 1:2:1</a></li>
                                        <li><a href="#">Sub 1:2:2</a></li>
                                        <li><a href="#">Sub 1:2:3</a></li>
                                        <li><a href="#">Sub 1:2:4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" class="parent">Bibliografia</a>
                                    <ul>
                                        <li><a href="#">Sub 1:4:1</a></li>
                                        <li><a href="#">Sub 1:4:2</a></li>
                                        <li><a href="#">Sub 1:4:3</a></li>
                                        <li><a href="#">Sub 1:4:4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" class="parent">Eventos</a>
                                    <ul>
                                        <li><a href="#">Sub 1:5:1</a></li>
                                        <li><a href="#">Sub 1:5:2</a></li>
                                        <li><a href="#">Sub 1:5:3</a></li>
                                        <li><a href="#">Sub 1:5:</a></li>
                                        <li><a href="#">Sub 1:5:5</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- end the menuh-container div -->
            </div>
            <!-- end the menuh div -->
        </div>
        <div class="sec">
            alredo
        </div>
    
    
    


    codigo css:

    Código:
    /*menu*/
    
    
    #menuh-container
        {
        position: absolute;        
        top: 1em;
        left: 1em;
        
        }
    
    #menuh
        {
        font-size: small;
        font-family: arial, helvetica, sans-serif;
        width:100%;
        
        float:left;
        margin:2em;
        margin-top: 1em;
        }
            
    #menuh a
        {
        text-align: center;
        display:block;
        border: 1px solid #555;
        white-space:nowrap;
        margin:0;
        padding: 0.3em;
        }
        
    #menuh a, #menuh a:visited    /* menu at rest */
        {
        color: white;
        background-color: #2E8B57;
        text-decoration:none;
        }
        
    #menuh a:hover    /* menu at mouse-over  */
        {
        color: white;
        background-color: #3CB371;
        }    
                
    #menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
        {
        background-image: url(/Images/navdown_white.gif);
        background-position: right center;
        background-repeat: no-repeat;
        }
        
    #menuh a.parent, #menuh a.parent:hover     /* attaches side-arrow to all parents */
        {
        background-image: url(/Images/nav_white.gif);
        background-position: right center;
        background-repeat: no-repeat;
        }
    
    #menuh ul
        {
        list-style:none;
        margin:0;
        margin-bottom:1px; 
        padding:0;
        float:left;
        width:9em;    /* width of all menu boxes */
         width:95px;
        }
    
    #menuh li
        {
        position:relative;
        
        min-height: -1px;     /* Sophie Dennis contribution for IE7 */
        vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
        font-size:10px;
        width:95px;
        }
    
    #menuh ul ul
        {
        position:absolute;
        z-index:500;
        top:auto;
        display:none;
        padding: 1em;
        margin:-1em 0 0 -1em;
        }
    
    #menuh ul ul ul
        {
        top:0;
        left:100%;
        }
    
    div#menuh li:hover
        {
        cursor:pointer;
        z-index:100;
        }
    
    div#menuh li:hover ul ul,
    div#menuh li li:hover ul ul,
    div#menuh li li li:hover ul ul,
    div#menuh li li li li:hover ul ul
    {display:none;}
    
    div#menuh li:hover ul,
    div#menuh li li:hover ul,
    div#menuh li li li:hover ul,
    div#menuh li li li li:hover ul
    {display:block;}
    
    /* End CSS Drop Down Menu */
    
    
    
    
    .menuprincipal
    {
    position:relative ;
    top:-20px;    
    background-color :red;
    left:50px;
    z-index:0;
    }
    .sec
    {
    position:relative;
    top:100px;
    left:200px;
    width:500px;
    height:700px;
    z-index:1 ;
    
    background-color:Yellow ;
    }
    
    tenho um menu drop down dentro de uma div
    e outra div que esta a amarelo com o nome alfredo, em que quando puxo as opções do submenu de uma opção ficam por baixo dessa div amarela como podem ver na imagem.

    imagem do problema
    [​IMG]

    gostava que essa opc ficasse por cima de div amarela

    gostava de um help
     
  2. p3dro

    p3dro Power Member

    Tenta retirar o "z-index:0;" no ".menuprincipal"
     
  3. alfinete

    alfinete Power Member

    não da na mesma
     
  4. p3dro

    p3dro Power Member

    Há bocado não tinha testado o código, mas testei agora e deu bem, os sub-menus verdes ficam por cima do div amarelo, não era isso o pretendido?
    Tanto funcionou retirando o z-index, como colocando z-index: 1000; isto dentro do ".menuprincipal"

    Acho que esse sistema de menus não funciona no IE6.
     
  5. alfinete

    alfinete Power Member

    thanks , ja descobri na mesma era mesmo isso
     
  6. ninja_corp

    ninja_corp Power Member

    tira a posição relativa da div amarela. As div´s posicionadas relativamete sobrepõe-se.

    Usa Floats!
     

Partilhar esta Página