Dropdown Nav Menu Appears on Right and Stacked Horizontally

Question

I'm trying to create a dropdown menu for one of the items in my nav bar. I based the code on this W3Schools example. Upon hover, the menu appears below the nav bar (as it should be) but it is 1) stacked horizontally rather than vertically and 2) appears to the far right on the page. I've look at similar questions here but haven't been able to figure out the problem in my code. Any help would be appreciated.

/* nav */

nav {
  display: flex;
  flex-wrap: wrap;
  padding: .25rem 0;
  color: #ffffff;
  font: 30px 'Roboto', sans-serif;
  margin: auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}

nav a {
  display: block;
  margin: 0 40px;
}


/* dropdown container */

.dropdown {
  float: none;
  position: relative;
  overflow: visibile;
}


/* dropdown button */

.dropdown .dropbtn {
  display: flex;
  font-size: 30px;
  border: none;
  outline: none;
  color: #ffffff;
  padding: inherit;
  background-color: inherit;
  font-family: inherit;
  margin: auto;
}


/* dropdown content (hidden by default */

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 10px;
  background-color: #ffffff;
  width: 250px;
  left: calc(50% - 125px);
}

.dropdown-content>a {
  color: black;
  text-align: left;
  border-bottom: 1px solid #009EDB;
}


/* show dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
  float: left;
  margin: 0;
}

<nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">
                        Work
                    </button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>

Answer 1

Problem number 1 was solved through Rody of the Frozen Peas answer.

For Problem number 2: You want to align the center of dropdown-content relative to it's parent. For that you want to shift dropdown-content to the left by half of it's width and then shift it a bit to the right by half of the width of the dropdown. Also the dropdown element needs to be relatively positioned otherwise the dropdown-content would be positioned realtive to the document. To make the dropdown-content visible you need to make dropdowns and the nav bars overflow visible.

nav {
    overflow: visible;
}

.dropdown {
    position: relative;
    overflow: visible;
}

.dropdown-content {
    position: absolute;
    width: 250px;
    left: calc(50% - 125px);
}

The reason this works is that you align the center of the dropdown-content with the left of dropdown by specifying left: -125px as you're shifting it to the left by half of the width of dropdown-content. To then align it with the center of dropdown you need to add 50% as it is absolutely positioned and will therefore use the parents width as reference and 50% of the parents width is the parents center.

Answer 2

Your dropdown is structured of anchors (links, <a> tags), which naturally are inline elements. That means that naturally these elements are located as part of page or line flow. To make them appear vertical, you need to change them to be "block" elements, which you use by adding display: block to the styling on the dropdown a elements:

nav a {
  margin: 0 40px;
  display: block;
}

The 'margin' was already present in this particular element.

I've also removed all the "!important" from your styling because it's bad practice and wasn't helping at all. Since you're missing a background, I restyled the triggering element to have red text so it doesn't seem like a random white space was triggering the dropdown.

That being said, I don't see any "styled far right" behavior for the drop down. The menu is displayed directly under the triggering element (with a 40px margin, which if you have a really small screen might make it seem like it's super far right.)

/* nav */
nav {
    display: flex;
    flex-wrap: wrap;
    padding: .25rem 0;
    color: #ffffff;
    font: 30px 'Roboto', sans-serif;
    margin: auto;
    justify-content: center;
    overflow: hidden;
}

nav a {
    margin: 0 40px;
    display: block;
}

/* dropdown container */
.dropdown {
    float: none;
    overflow: hidden;
}

/* dropdown button */
.dropdown .dropbtn {
    display: flex;
    font-size: 30px;
    border: none;
    outline: none;
    color: red;
    padding: inherit;
    background-color: inherit;
    font-family: inherit;
    margin: auto;
}

/* dropdown content (hidden by default */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: inherit;
    width: 100%;
}

/* show dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

<nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">Work</button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>