注意：在所有元素上都将
当在导航栏中悬停"Drop"时，我希望div显示在下面。然而，它根本没有显示出来。当我展示它时，它在左上角。我如何使它显示在Drop元素下面，而不明显地对值进行硬编码。
这是其他文本下面的其他文本。
/** @format */
* {
box-sizing: border-box;
overflow: hidden;
outline: none;
margin: 0;
border: 0;
padding: 0;
}
html {
background-color: rgb(193, 235, 107);
}
nav {
background-color: #333;
}
nav a {
float: left;
color: white;
font-size: 15px;
text-decoration: none;
display: block;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-decoration: none;
}
.drop:hover {
background-color: rgb(193, 235, 107);
}
nav a:hover {
background-color: rgb(0, 0, 0);
}
.drop-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;
}
.drop-content a {
float: left;
color: white;
font-size: 15px;
text-decoration: none;
display: block;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-decoration: none;
}
.drop-content a:hover {
background-color: #ddd;
}
.drop:hover .drop-content {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css.css" />
<title>TESTING</title>
</head>
<body>
<nav>
<a href="">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
<a href="">Something</a>
<a class="drop" href="">Drop</a>
<div class="drop-content">
<a href="">Dropped</a>
<a href="">Dropped</a>
</div>
<a href="">Last</a>
</nav>
<main></main>
<script src="js.js"></script>
</body>
</html>最好的方法是将链接包装在无序列表中。然后将下拉框包装在与主锚点相同的li中，使其相对于元素本身的位置如下所示：
注意：在所有元素上都将overflow设置为hidden，应该删除
/** @format */
* {
box-sizing: border-box;
outline: none;
margin: 0;
border: 0;
padding: 0;
}
html {
background-color: rgb(193, 235, 107);
}
nav {
background-color: #333;
}
nav ul {
display: flex;
list-style: none;
}
nav li {
position: relative;
}
nav a {
float: left;
color: white;
font-size: 15px;
text-decoration: none;
display: block;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-decoration: none;
}
.drop:hover {
background-color: rgb(193, 235, 107);
}
nav a:hover {
background-color: rgb(0, 0, 0);
}
.drop-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;
}
.drop-content a {
color: white;
font-size: 15px;
text-decoration: none;
display: block;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
text-decoration: none;
}
.drop-content a:hover {
background-color: #ddd;
}
li:hover .drop-content {
display: block;
position: absolute;
top: 37px;
left: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css.css" />
<title>TESTING</title>
</head>
<body>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><a href="">Something</a></li>
<li>
<a class="drop" href="">Drop</a>
<div class="drop-content">
<a href="">Dropped</a>
<a href="">Dropped</a>
</div>
</li>
<li><a href="">Last</a></li>
</ul>
</nav>
<main></main>
<script src="js.js"></script>
</body>
</html>