Alignment in nav menu - css

Question

I'm working on a nav bar and dropdown menu using only CSS.
I'm trying to align the sub menu with respect to the parent element .dropdown. When I use position:relative on any parent container, so that I can add position:absolute the child elements, very strange formatting things start to happen.
/* Nav */
header nav {
float: right;
margin-top: 43px;
border-style: solid;
border-color: black;
}
header nav li {
display: inline;
margin-left: 50px;
}
header nav li a {
color: black;
transition-property: color;
transition-duration: .2s;
}
header nav li a:hover {
color: orange;
}
/* DROPDOWN MENU */
.dropdown {
}
.drop-nav {
position:absolute;
display:none;
border-style: none;
border-color:black;
padding:10px;
padding-right: 30px;
left:40%;
margin-top: 5px;
background-color: grey;
color:white;
}
.drop-nav li{
margin-left:20px;
}
.dropdown:hover .drop-nav {
display:block;
}
<header>
<h1>
<img src="logo.jpg" alt="coffeeology" />
</h1>
<nav>
<ul class="main-nav">
<li>Home</li>
<li>About Us</li>
<li class="dropdown">Menu
<ul class="drop-nav">
<li>Beverages</li>
<li>Breakfast Items</li>
<li>Brunch</li>
<li>Gelato</li>
</ul>
</li>
<li>Daily Specials</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
The end objective here is to keep the sub menu in a relevant position across various window sizes. Aligning the sub menu to a larger element doesn't solve the problem because the sub menu won't stay fixed with respect to the .dropdownclass.
Any help is appreciated! Thank you.

Answer 1

Is this something you're looking for?
https://jsfiddle.net/28qmkLsf/
/* DROPDOWN MENU */
.dropdown {
position: relative;
}
.drop-nav {
position:absolute;
display:none;
border-style: none;
border-color:black;
padding:10px;
padding-right: 30px;
left:0%;
top: 100%;
background-color: grey;
color:white;
width: 150px;
}
.drop-nav li{
margin-left:20px;
display: block;
}