您好，
我最近在做一个网站，我在做一个下拉导航栏。问题是，每当我插入文本并将鼠标悬停在导航栏上时，它都不会覆盖文本。我现在沿着 Stack Overflow 搜索了一点点，但我尝试过的一切都没有奏效。我试过“position:absolute；”，“z-index:1000；”等等 我想知道如果我创建自己的论坛，有人可能会帮助我。 Internet Explorer、Google Chrome 和 Microsoft Edge 均无法运行。感谢您的回复。
/*Title*/
html, body {
margin: 0;
padding: 0;
font-family: Cursive, Sans-Serif;
}
#header {
width: auto;
height: 10px;
padding: 1% 1% 1% 2%;
background-color: #5e0d0d;
box-shadow: 1px 1px 2px 2px #262626;
}
#header #title {
font-family: "Open Sans", "Segoe UI";
font-size: 150%;
font-weight: lighter;
color: #fff;
text-decoration: none;
float: left;
margin-top: -.65%;
}
/*Navigation Bar*/
ul {
font-family: Arial;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-top: -.60%
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: #911515;
z-index: 1000;
}<!DOCTYPE html>
<html>
<head>
<title>Slasher Hub - Latest</title>
<meta name="viewport" content="width:device-width; initial-scale:1;">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<a href="index.html" id="title">Slasher Hub</a>
<nav>
<ul>
<li style="margin-left: 40px;"><a>Home</a></li>
<li><a>About Me</a></li>
<li><a>Slasher Dev Team</a>
<ul>
<li><a>About Us</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>Recent</a></li>
</ul>
</li>
<li><a>Gallary</a></li>
</ul>
</nav>
</header>
<h3>Welcome to the Slasher Hub! This is the latest stuff going on with Slasher now!</h3>
</body>
</html>最佳答案
要使 z-index 正常工作，您必须将 position:absolute 添加到元素中。
ul li a:hover {
background-color: #911515;
z-index: 1000;
position: absolute; }
关于html - 我的下拉导航栏不会在文本前面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52046300/