Navigation bar dropdown displaying in the wrong place

Question

I'm making a navigation bar for a site that I'm working on, and one of the links will show a dropdown on hover. Currently, my dropdown content displays nowhere near below the dropdown where I would like it to be. This is probably a simple problem, but I would appreciate any help! 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;
}

Thanks in advance!

Answer 1

Set your .dropdown to position: relative; and then set .dropdown-content left & top or margin styles for fine positioning.