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

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-content left & top或margin样式以进行精确定位。