所以，我对 HTML 和 CSS 比较陌生，并且我研究了为什么我的导航栏多次无法工作，但我似乎永远无法让它工作。本质上，当我将鼠标悬停在元素上时，如果我更改显示:无；这些元素不会下拉。显示: block ；它们也不会出现在元素下方 - 它们只是下拉到下一行并显示为内联。我非常感谢一些建设性的批评，这样我就可以学习并继续发展。提前谢谢您!
html, body {
margin: 0;
height: 100%;
width: 100%;
background-color: #0E0B16;
}
#wrap {
height: auto;
width: 100%;
border-bottom-style: solid;
border-bottom-color: #E7DFDD;
border-bottom-width: thin;
}
ul {
padding: 0;
margin: 0;
text-align: justify;
background: #0E0B16;
}
li {
list-style: none;
display: inline-block;
text-align: left;
}
a {
color: #E7DFDD;
text-decoration: none;
display: block;
margin-left: -4px;
padding: 16px 25px;
font-family: Verdana;
font-weight: bold;
border-right-style: solid;
border-right-color: #E7DFDD;
border-right-width: thin;
}
a:hover {
background-color: #E7DFDD;
color: #0E0B16;
}
a:active {
background-color: #E7DFDD;
color: #0E0B16;
}
.active {
background-color: #E7DFDD;
color: #0E0B16;
}
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content{
display: block;
} <!DOCTYPE html>
<html>
<head>
<title>Witcher's World</title>
<link rel="stylesheet" href="witcher.style.css"/>
<meta charset="UTF-8">
<header>
<nav id="wrap">
<ul>
<li><a class ="active" href="witcher.index.html">Home</a></li>
<li><a href="#">Witcher Lore</a></li>
<li><a class="dropdown" href="#">Glossary</a></li>
<ul class="dropdown-content">
<li><a href="#">Characters</a></li>
<li><a href="#">Bestiary</a></li>
</ul>
<li><a class="dropdown" href="#">Weapons</a></li>
<ul class="dropdown-content">
<li><a href="#">Swords</a></li>
<!--<ul class="dropdown-content">
<li><a href="#">Steel Swords</a></li>
<li><a href="#">Silver Swords</a></li>
</ul-->
<li><a href="#">Signs</a></li>
</ul>
<li><a href="#">Books</a></li>
</ul>
</nav>
</header>
</head>
<body>
<footer>
</footer>
</body>
</html>
最佳答案
您的dropdown类不涵盖dropdown-content，您还必须为您的dropdown-content<提供.position:absolute/
html, body {
margin: 0;
height: 100%;
width: 100%;
background-color: #0E0B16;
}
#wrap {
height: auto;
width: 100%;
border-bottom-style: solid;
border-bottom-color: #E7DFDD;
border-bottom-width: thin;
}
ul {
padding: 0;
margin: 0;
text-align: justify;
background: #0E0B16;
}
li {
list-style: none;
display: inline-block;
text-align: left;
}
a {
color: #E7DFDD;
text-decoration: none;
display: block;
margin-left: -4px;
padding: 16px 25px;
font-family: Verdana;
font-weight: bold;
border-right-style: solid;
border-right-color: #E7DFDD;
border-right-width: thin;
}
a:hover {
background-color: #E7DFDD;
color: #0E0B16;
}
a:active {
background-color: #E7DFDD;
color: #0E0B16;
}
.active {
background-color: #E7DFDD;
color: #0E0B16;
}
.dropdown-content {
display: none;
}
.dropdown:hover .dropdown-content{
display: block;
position: absolute;
} <!DOCTYPE html>
<html>
<head>
<title>Witcher's World</title>
<link rel="stylesheet" href="witcher.style.css"/>
<meta charset="UTF-8">
</head>
<body>
<header>
<nav id="wrap">
<ul>
<li><a class ="active" href="witcher.index.html">Home</a></li>
<li><a href="#">Witcher Lore</a></li>
<li class="dropdown"><a href="#">Glossary</a>
<ul class="dropdown-content">
<li><a href="#">Characters</a></li>
<li><a href="#">Bestiary</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Weapons</a>
<ul class="dropdown-content">
<li><a href="#">Swords</a></li>
<!--<ul class="dropdown-content">
<li><a href="#">Steel Swords</a></li>
<li><a href="#">Silver Swords</a></li>
</ul-->
<li><a href="#">Signs</a></li>
</ul>
</li>
<li><a href="#">Books</a></li>
</ul>
</nav>
</header>
<footer>
</footer>
</body>
</html>
关于html - 为什么我的导航栏不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44741280/