How to position dropdown menu css

Question

I have a dropdown menu in my nav but when you hover over it the links show to the right of the dropdown button as well as overlapping each other.

I would like the links to be listed below the dropdown button.

The 'work in progress' and 'my works' should be below the 'my projects' button

header {
  padding: 10px 35px;
  background-color: rgba(5, 69, 129, 0.7);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  top: 0;
}

header h1 {
  font-weight: bold;
  font-size: 36px;
  color: rgba(240, 238, 238, 1.0);
}

header a {
  text-decoration: none;
  color: rgba(240, 238, 238, 1.0);
}

header nav {
  margin: 7px 0;
  overflow: hidden;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

header nav ul li {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  float: left;
}

header nav ul li a {
  margin: 0 30px;
  font-weight: lighter;
  font-size: 1.55vw;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-weight: lighter;
  font-size: 1.55vw;
  display: inline-flex;
  border: none;
  outline: none;
  color: rgba(240, 238, 238, 1.0);
  background-color: inherit;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(5, 69, 129, 0.7);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<header>
  <h1>Micah Moore</h1>
  <nav>
    <ul>
      <li>
        <a>Nav Item</a>
      </li>
      <li class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <ul>
          <li>
            <a class="dropdown-content">Item 1</a>
          </li>
          <li>
            <a class="dropdown-content">Item 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a>Nav Item 2</a>
      </li>
    </ul>
  </nav>
</header>

Answer 1

Make use of left: 0; and top 100% in your css. Working example below.

.main {
  display: flex;
  list-style: none;
  border: 2px solid blue;
}

.main > li {
  padding: 10px;
}

.parent { 
  position: relative;
}

.sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  list-style: none;
  padding-left: 0px;
  padding: 10px;
  display: none;
  border: 2px solid red;
}

.parent:hover .sub-menu { display: block; }

<ul class="main">
<li>Menu One</li>
<li class="parent">Menu Two
  <ul class="sub-menu">
    <li>Sub Menu One</li>
    <li>Sub Menu Two</li>
  </ul>
</li>
</ul>