Question

.login_nav{
display: block;
font-family: arial;
}

.login_nav ul ul {
display: none;
}

.login_nav ul li:hover > ul {
    display: block;
}

.login_nav ul {
list-style: none;
position: relative;
display: inline-table;
float:right;
width: 65%;
}

.login_nav ul:after {
    content: ""; clear: both; display: block;
}

.login_nav ul li {
padding: 10px 0 10px 10px;
border-bottom: solid 1px rgba(30,30,30,0.4);
}
.login_nav ul li:hover {
    background: rgba(30,30,30,0.4);
}
    .login_nav ul li:hover a {
        color: #fff;
    }

.login_nav ul li a {
    display: block;
    color: #e1e1e1; 
    text-decoration: none;
}

.login_nav ul ul {
background: rgba(30,30,30,0.6); 
border-radius: 0px; 
padding: 0;
width: 200px;
position: absolute;
z-index: 5000;
left: 100%; 
top:0;
}
.login_nav ul ul li {
    float: none; 
    position: relative;
    z-index: 5000;
    padding: 10px 0 10px 10px;
}
    .login_nav ul ul li a {
        color: #e1e1e1;
    }

下载菜单中的css。问题是下拉菜单出现在我的内容背后。我曾尝试过使用z-index和overflow，但我似乎无法让它工作或者我只是不把它放在正确的位置。我确定它很简单，我只是看到了它。

我的内容容器的z-index设置为1

Answer 1

将z-index放入.login_nav并给它一个值1000.我的导航栏遇到了同样的问题

下拉菜单显示内容背后

1 个答案: