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

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 样式以进行精确定位。

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

Navigation bar dropdown displaying in the wrong place

html

navigation

dropdown

nav