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

【问题标题】：Navigation bar dropdown displaying in the wrong place导航栏下拉菜单显示在错误的位置
【发布时间】：2020-11-13 20:43:26
【问题描述】：

我正在为我正在处理的网站制作导航栏，其中一个链接将在悬停时显示下拉菜单。目前，我的下拉内容显示在我希望的下拉列表下方。这可能是一个简单的问题，但我会很感激任何帮助！ 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;
}

提前致谢！

【问题讨论】：

标签： html navigation dropdown nav

【解决方案1】：

将.dropdown 设置为position: relative;，然后设置.dropdown-content left & top 或margin 样式以进行精确定位。

【讨论】：

这对我来说效果很好，只是我的目标是让这个网站具有响应性，但我认为没有一个好的方法可以让我定位和实现这种效果。
您只能使用媒体查询为大屏幕设置绝对定位：w3schools.com/css/css3_mediaqueries_ex.asp@media screen and (min-width: 768px) { .dropdown-content { display: none; position: absolute; } }