导航栏下拉列表显示在错误的位置

Question

我正在为我正在处理的网站制作一个导航栏，其中一个链接将在悬停时显示一个下拉菜单。目前，我的下拉内容在我想要的下拉菜单下方显示得不远。这可能是一个简单的问题，但我会感谢任何帮助！ .HTML：

<nav>
<a href="index" class="nav-item">HOME</a>
<a href="about" class="nav-item">ABOUT</a>
<a href="blog" class="nav-item">BLOG</a>
<div class="dropdown">
<a href="projects" class="dropbtn nav-item">PROJECTS</a>
<div class="dropdown-content">
<a href="client-work">Client Work</a>
<a href="personal-projects">Personal Projects</a>
</div>
</div>
</nav>

.CSS：

nav {
margin-top: 4.3vmin;
text-align: center;
display: none;
}
.nav-item:link {
color: #9422ed;
text-decoration: none;
padding: 3.7vmin;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.nav-item:visited {
color: #9422ed;
}
.nav-item:hover {
color: #5c0d99;
text-decoration: none;
}
.nav-item:active {
color: #5c0d99;
}
.dropdown {
overflow: hidden;
display: inline;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
z-index: 1;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
padding: 10px 14px;
}
.dropdown-content a:hover {
background-color: #e7e7e7;
}
.dropdown:hover .dropdown-content {
display: block;
}

提前感谢！

Answer 1

将.dropdown设置为position: relative;，然后设置.dropdown-contentleft和top或margin样式以进行精细定位。