problema menu drop down html css

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


gostava que essa opc ficasse por cima de div amarela

gostava de um help
 
alfinete disse:
não da na mesma
Clicar para expandir...

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.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo