CSS Drop down menu is hiding behind a div (already tried z-index)

Question

I´m trying to place a CSS sub-menu over a div, and I already tried using z-index, but it´s still not working. Here is the HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>Concurso</title>
        <link type="text/css" rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="frame-superior">
            <div id="menu">
            <ul>
                <li>
                    <a href="#">HOME</a>
                </li>
                <li>
                    <a href="#">Receitas</a>
                    <ul>
                        <li><a href="#">Receita 1</a><li>
                        <li><a href="#">Receita 2</a><li>
                        <li><a href="#">Receita 3</a><li>
                    </ul>
                </li>
                <li>
                    <a href="#">O Concurso</a>
                </li>
                <li>
                    <a href="#">Edi&ccedil;&otilde;es anteriores</a>
                    <ul>
                        <li><a href="#">Edi&ccedil;&atilde;o 1</a><li>
                        <li><a href="#">Edi&ccedil;&atilde;o 2</a><li>
                        <li><a href="#">Edi&ccedil;&atilde;o 3</a><li>
                    </ul>
                </li>
                <li>
                    <a href="#">Contato</a>
                </li>
              </ul>
            </div>
        </div>
        <div id="frame-inferior">
            <img id="but-inicial" src="but-inicial.jpg"/>
        </div>
    <body/>
</html>

And here is the CSS code:

/* Contain floats: h5bp.com/q */
#menu > ul:before, #menu > ul:after {
    content: "";
    display: table;
}

#menu > ul:after {
    clear: both;
}

#menu > ul {
    *zoom: 1;
}

/* Level one */
#menu > ul > li {
    float:left;
    position:relative;
    overflow:visible;
    width:30%;
    max-width:190px;
    list-style-type: none;
    font-size: 0.5em;
    z-index: 2;
}
#menu > ul > li > a{
    padding:.5em 1em;
    position: relative;
    z-index: 2;
}

/* Level 2*/
#menu > ul > li > ul {
    background:#afeeee;
    border-radius: 0 5px 5px 5px;
    position:absolute;
    z-index: 2;
    padding:1em;
    width:200px; /*set to whatever you need*/
    display:none;
}

/* Segunda lista do level 2*/
#menu > ul > li:nth-child(2) > ul{
    margin-left:-50%;
    border-radius: 5px;
    list-style-type: none;
    position: absolute;
    z-index: 2;
}

/*Quarta lista do level 2*/
#menu > ul > li:nth-child(4) > ul{
    margin-left:-50%;
    border-radius: 5px;
    list-style-type: none;
    position: absolute;
    z-index: 2;
}

/* Última lista do level 2*/
#menu > ul > li:last-child > ul{
    right:0;
    border-radius: 5px 0 5px 5px;
    position: absolute;
    z-index: 2;
}

/* Hover level 1*/
#menu > ul > li:hover {
    background: #afeeee;
    border-radius: 5px 5px 0 0;
    color:#fff;
}

#menu > ul > li:hover > ul {
    display:block;
    position: absolute;
    z-index: 3;
}

#menu > ul > li:hover > a,
#menu > ul > li > ul a{
    color:#fff;
}

#menu a {
    text-decoration:none;
    display:block;
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    color: black;
}
#frame-superior {
    background-image: url(fundo-superior.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    font-size: 50px;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 200px;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    z-index: 2;
}
#frame-inferior {
    /*background-image: url(buteco-inicial.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;*/
    font-size: 50px;
    position: absolute; 
    top: 200px; /*Colocar o mesmo valor da height do frame-superior*/
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; 
    z-index: 0;
}
#but-inicial {
    width: 100%;
    position: absolute;
    margin-top: -25%;
    z-index: 0;
}

The sub-menus keep going behind the image (or behind the div frame-inferior).

sometimes the DOM order is the problem, you could put the menu as the last item in the DOM and then reposition it with CSS above it. — DrCord, May 04 '15 at 23:44
another thing - to use z-index you have to set it on each item to get it to work reliably. You also cannot use negative z-indexes. — DrCord, May 04 '15 at 23:45

score 1 · Answer 1 · answered May 05 '15 at 00:11

1

1st. Remove the overflow property on #frame-superior so your menus don't get cut off.

2nd. Remove z-index everywhere except on #menu > ul > li:hover > ul. Also, z-index:0 is the default setting, so no need to set it up again.

Check the final solution here

answered May 05 '15 at 00:11

Oriol

11,660
5
35
37

It was the overflow! Thank you. – user3753054 May 05 '15 at 00:19
NP. Please up vote & mark this answer as the response. Thanks. – Oriol May 05 '15 at 00:34

PrakashSharma · Answer 2 · 2015-05-05T00:22:49.577

0

https://jsfiddle.net/f5yt7rna/6/

    #menu > ul > li:hover {
    background: #afeeee;
    border-radius: 5px 5px 0 0;
    color:#fff;
    z-index:100;
}

Note the change in z-index

edited May 05 '15 at 00:22

answered May 04 '15 at 23:48

PrakashSharma

386
5
16

`z-index` doesn't have `px` and cannot be negative. Basically this translates to `z-index:0;` . – Oriol May 05 '15 at 00:13
1

Sorry for px, But i see negative is allowed. [link](http://www.w3schools.com/cssref/pr_pos_z-index.asp). Check and let me know – PrakashSharma May 05 '15 at 00:17
You're right. the CSS 2.1 specification: http://www.w3.org/TR/CSS2/visuren.html#z-index allows it. For future reference don't use w3school. This is why: http://meta.stackoverflow.com/questions/280478/why-not-w3schools-com – Oriol May 05 '15 at 00:36

CSS Drop down menu is hiding behind a div (already tried z-index)

2 Answers2