Flexbox Nav Dropdown Not Under Container - html

Question

I am trying to use a flexbox nav menu with dropdowns for some menus. For some reason, on hover, the dropdown lists are showing up to the right of the container I am hovering on. I would like for them to show below, like a normal nav menu.
Here is a codepen:
http://codepen.io/anon/pen/XbmaBY
HTML:
<nav id="nav">
<ul class="nav-flex">
<li class="nav-brand-flex">
<img src="img.png" \>
</li>
<li class="nav-link-flex nav-flex-dropdown">
Dropdown 1
<div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</li>
<li class="nav-link-flex nav-flex-dropdown">
Dropdown 2
<div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</li>
<li class="nav-link-flex">
Regular 1
</li>
<li class="nav-link-flex">
Regular 2
</li>
<li class="nav-link-flex">
Regular 3
</li>
</ul>
</nav>
Sass:
.nav-flex {
display: flex;
list-style-type: none;
padding: 0;
background-color: #58575f;
li {
justify-content: center;
a {
align-self: center;
color: white;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
letter-spacing: .4px;
}
}
#media (max-width: 760px) {
padding-top: 0;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-direction: column;
-webkit-flex-direction: column;
background-color: #f6f6f6;
}
}
.nav-link-flex {
display: flex;
padding: 0 12.5px;
position: relative;
#media (max-width: 760px) {
width: 90%;
background-color: #494949;
border-radius: 20px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
padding: 10px;
}
&:hover {
background-color: white;
a {
color: black;
text-decoration: none;
&+ div {
display: block;
}
}
}
a {
&+ div {
border-radius: 0 0 2px 2px;
box-shadow: 0 3px 1px rgba(0,0,0,.05);
display: none;
font-size: 1rem;
position: absolute;
width: 195px;
}
}
}
.nav-brand-flex {
margin-right: auto;
display: flex;
padding: 5px 0;
a {
display: flex;
img {
height: 35px;
align-self: center;
}
}
#media (max-width: 760px) {
margin: 0;
background-color: #494949;
width: 100%;
border-radius: 0;
font-size: 36px;
padding: 10px 0;
margin-bottom: 10px;
}
}
Any help would be greatly appreciated, because I cannot figure out why they are going to the right instead of below.

Answer 1

This happens because the default value of flex-direction is flex-direction: row. You want to override this, by adding flex-direction: column; to .nav-link-flex. So, it should be:
.nav-link-flex {
display: flex;
padding: 0 12.5px;
position: relative;
flex-direction: column; // <-- add this line in your scss
...
By way of example I've added this in to a fork of your pen.