Question

`

<!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不会将下拉菜单置于其他元素的前面。

The image looks like this

如果要我包含CSS，请包含。如果有任何快速修复方法，请通知我。 Z索引和更改位置：绝对也不起作用。

Answer 1

问题是您拥有的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>

Z索引未在其他元素的顶部显示该元素

1 个答案: