Apologies, I was really tired of trying to figure out the issue. Let me rephrase the question - "How do I make a drop-down menu appear below a specific item in my centered horizontal menu". (I have made some changes to the code)
HTML
<div class="menu">
<ul id="nav">
<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>
<ul id="dropdown">
<li><a href="#">sublink1</a></li>
<li><a href="#">sublink2</a></li>
</ul>
</li>
</ul>
</div>
CSS for centered .menu
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
height: 30px;
position: relative;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
margin-top: 40px;
font-family: "oswald", sans-serif;
color: black;
text-decoration: none;
}
#nav a:hover {
background-color: rgba(107, 163, 252, 0.28);
}