`
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
overflow: hidden;
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
@media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<a href = "#home" class = "active"> <i class = "fa fa-fw fa-home"> </i> Home </a>
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
<a href = "#"> Cars </a>
<a href = "#"> Shounen </a>
<a href = "#"> Sports </a>
</div>
</div>
<div class = "topnav-right">
<a href = "#createaccount"> <i class="fa fa-fw fa-user"> </i> Create Account </a>
</div>
</div>
</body>
</html>
`我正在尝试为我的网站创建一个下拉菜单，更改z-index不会将下拉菜单置于其他元素的前面。
如果要我包含CSS，请包含。如果有任何快速修复方法，请通知我。 Z索引和更改位置：绝对也不起作用。
答案 0 :(得分：0)
问题是您拥有的overflow:hidden意味着存在下拉列表，但溢出将其隐藏了。
我假设溢出在那里是一个明确的解决方案？如果是这样，则存在替代解决方案。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
/* overflow: hidden; */ /* remove this */
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
/* float: left; */ /* and probably this */
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
@media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<a href = "#home" class = "active"> <i class = "fa fa-fw fa-home"> </i> Home </a>
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
<a href = "#"> Cars </a>
<a href = "#"> Shounen </a>
<a href = "#"> Sports </a>
</div>
</div>
<div class = "topnav-right">
<a href = "#createaccount"> <i class="fa fa-fw fa-user"> </i> Create Account </a>
</div>
</div>
</body>
</html>