I'm working on implementing a flexbox navigation menu with dropdowns for certain items. However, I've encountered an issue where the dropdown lists are appearing to the right of the container on hover, rather than below it as expected for a typical navigation menu.
Check out my CodePen example: http://codepen.io/anon/pen/XbmaBY
Here's the HTML code:
<nav id="nav">
<ul class="nav-flex">
<li class="nav-brand-flex">
<a href=""><img src="img.png" \></a>
</li>
<li class="nav-link-flex nav-flex-dropdown">
<a href="">Dropdown 1</a>
<div>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</li>
(more HTML code here...)
</ul>
</nav>
And here's the Sass code:
.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;
}
}
(more Sass code here...)
Any insight into why the dropdowns are displaying incorrectly would be greatly appreciated. Thank you!