0

我正在尝试在 div 上放置一个 CSS 子菜单，并且我已经尝试过使用 z-index，但它仍然无法正常工作。这是HTML代码：

<!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>

这是CSS代码：

/* 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;
}

子菜单一直在图像后面（或在 div frame-inferior 后面）。

4

2 回答 2

1

第一个。删除overflow属性，#frame-superior这样您的菜单就不会被切断。

第二。删除z-index除 on 之外的所有位置#menu > ul > li:hover > ul。此外，z-index:0是默认设置，因此无需重新设置。

在此处检查最终解决方案

于 2015-05-05T00:11:40.700 回答
0

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

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

注意 z-index 的变化

于 2015-05-04T23:48:21.107 回答