HTML 悬停下拉列表在 div 上

所以，我有一个下拉菜单，在悬停时会下降。但是，每当下面有不同的div时，下拉菜单就会在其后面，因此不完全可见。

我已经摆弄了 z 索引，但它不会改变任何东西。

将z-index: 9;添加到此选择器 #navbar 。

这是工作代码。

* {
	font-family: "comic sans ms";
}
.spacer {
	width: 100%;
	height:95px;
}
/* Navigation bar */
#navbar {
	width: 100%;
	height: 50px;
	background-color: deeppink;
	position: fixed;
	margin-top: 5;
	left: 0;
	color: yellow;
	
	/* non-selectable text */
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
  z-index: 9;
}
.logo {
	height: 50px;
	float: left;
}
.navbutt {
	background-color: yellow;
	border: none;
	color: orange;
	height: 50px;
	width: 80px;
	font-size: 12px;
}
#comics {
	margin-left: 7px;
}
#login {
	float: right;
	margin-right: 10px;
}
#login-text {
	text-align: center;
	padding-top: 3px;
}
/* Dropdown menu */
.dropdown {
	position: relative;
	display: inline-block;
}
.dropdown-content {
	display: none;
	position: fixed;
	color: orange;
	background-color: yellow;
	margin-top: 5px;
	min-width: 80px;
	z-index: 99;
}
.dropdown-content a {
	color: orange;
	text-decoration: none;
	padding-top: 15px;
	padding-bottom: 15px;
	display: block;
}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown-content a:hover {
	color: yellow;
	background-color: orange;
}
.navbutt:hover {
	color: yellow;
	background-color: mediumvioletred;
}
/* Image upload form */
.form-right {
	position: relative;
	float: right;
	margin-right: 100px;
}
/* Page Listbox */
.pagelist {
	background-color: skyblue;
	position: relative;
	float: right;
	width: 20%;
	height: 70%;
	overflow-y: scroll;
}

<!DOCTYPE html>
<html>
<head lang="de">
<meta charset = "UTF-8" />
<title>komix.lit - zuhause seite</title>
</head>
<body>
<div id="navbar">
<img class="logo" src="inc/logo.png" />
komix.lit
<button id="home" class="navbutt" onClick="location.href='home.php'">zuhause</button>
<button id="comics" class="navbutt" onClick="location.href='komix.php'">komix</button>
<div id=login class="navbutt dropdown"><p id='login-text'>dicctator</p><div class='dropdown-content'><span id='login-text'><a href='login.php' id='dropdown-url'>austragen</a><a href='neuerkomix.php' id='dropdown-url'>neuer Komix</a><a href='meinekomix.php' id='dropdown-url'>meine Komix</a></span></div></div></div>
<div class="spacer"></div>
<div class="content"><img src='komix13_03_18_08_20_25-2.jpg' /><div class="pagelist"><ul><li><a href='pages.php?id=51'>Seite 1</a></li><li><a href='pages.php?id=55'>Seite 2</a></li><li><a href='pages.php?id=54'>Seite 3</a></li><li><a href='pages.php?id=52'>Seite 4</a></li><li><a href='pages.php?id=53'>Seite 5</a></li></ul></div>
</div>
</body>
<footer>
	
</footer>
</html>

如果我们

没有通过 CSS 明确设置，最底部的元素默认会获得更高的 z-index，这就是您的导航栏内容落后的原因。更改如下所示：

#navbar {
width: 100%;
height: 50px;
background-color: deeppink;
position: fixed;
margin-top: 5;
left: 0;
color: yellow;
z-index: 10; // Key line
/* non-selectable text */
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

相关内容

最新更新

热门标签：