html - 下拉菜单显示在内容后面

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。我的导航栏也有同样的问题