Hover dropdown menu appears left instead of directly underneath Links anchor - html

Question

This is probably very simple to figure out, but when hovering over the Links element, the dropdown menu appears to the left instead of vertically dropping down beneath the Links anchor when hovering over it. Thanks.
[https://jsfiddle.net/kolinio/p9Lea8g4/6/][1]
CSS
ul {
}
li a,
.dropbtn {
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
ul {
margin: 0px;
padding: 0px;
border: 0px;
vertical-align: middle;
background-color: #a2ded0;
}
ul#nlist {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
ul#nlist li {
display: inline;
}
HTML
<ul id='nlist'>
<li><a href='#' class='home'>Home</a></li>
<li><a href='#' class='about'>About</a></li>
<li class="dropdown">
Links
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li><a href='#' class='volunteer'>Volunteer</a></li>
<li><a href='#' class='contact'>Contact</a></li>
<li><a href='#' class='calender'>Calender</a></li>
</ul>
<!-- end snippet -->
li a,
.dropbtn {
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
ul {
margin: 0px;
padding: 0px;
border: 0px;
vertical-align: middle;
}
ul#nlist {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
ul#nlist li {
display: inline;
}
_______________________________________________________________>>>
<ul id='nlist'>
<li><a href='#' class='home'>Home</a></li>
<li><a href='#' class='about'>About</a></li>
<li class="dropdown">
Links
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li><a href='#' class='volunteer'>Volunteer</a></li>
<li><a href='#' class='contact'>Contact</a></li>
<li><a href='#' class='calender'>Calender</a></li>
</ul>
[1]: https://jsfiddle.net/kolinio/p9Lea8g4/6/

Answer 1

Try This one.
Html
<ul id='nlist'>
<li><a href='#' class='home'>Home</a></li>
<li><a href='#' class='about'>About</a></li>
<li class="dropdown">
Links
<ul class="dropdown-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li><a href='#' class='volunteer'>Volunteer</a></li>
<li><a href='#' class='contact'>Contact</a></li>
<li><a href='#' class='calender'>Calender</a></li>
</ul>
CSS:
ul {
}
.dropdown{
position:relative;
}
li a, .dropbtn {
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
left:-9999px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
left:0px;
}
ul {
background-color: #a2ded0;
margin: 0px;
padding: 0px;
border: 0px;
vertical-align: middle;
}
ul#nlist {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
ul#nlist li {
display: inline;
}
https://jsfiddle.net/p9Lea8g4/7/