My dropdown menu in my nav bar isn't aligning - html

Question

I'm having trouble aligning my drop down menu in my nav bar, I've tried every suggestion out there. I've tried left, float: left, right, and pretty much everything else. I think it is possibly something interfering. The drop down menu has everything aligned from center to right of the parent menu item.
https://jsfiddle.net/ethacker/j7tgq95j/3/
My html code:
<header>
<nav>
<h1> Welcome to Mommy Madness</h1>
<ul>
<li class="parentMenu">Home
<ul class="sub-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li class="parentMenu">Pregnancy
<!--
Gender Predictions:
Old Wive's Tale
Boy vs Girl- The Ramzi Method
-->
<ul class="sub-menu">
<li>Advice</li>
<li>Gender Predictions</li>
<li>Trying To Conceive</li>
</ul>
</li>
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<li>Fetal Development</li>
<li>Guidelines </li>
<li> Milestones</li>
</ul>
</li>
<li class="parentMenu">Party Momma
<!--
Birthdays - Link to 1-10th bdays.
-->
<ul class="sub-menu">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li> Birthdays</li>
</ul>
</li>
<li class="parentMenu">Stations
<ul class="sub-menu">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</li>
<li class="parentMenu">Memory Markers
<!--
Drop Down Menu:
DIY
Purchases
(Both to have holiday/event selectors on right of page)
-->
<ul class="sub-menu">
<li>DIY</li>
<li>Purchases</li>
</ul>
</li>
<li class="parentMenu">Reviews
<ul class="sub-menu">
<li>Games</li>
<li>Gear</li>
<li>Learning</li>
</ul>
</li>
<li class="parentMenu">Blog
<ul class="sub-menu">
<li>Fit Momma</li>
<li>Minimal Momma</li>
<li>Modern Momma</li>
<li>Organic Momma</li>
<li>Organizing Queen</li>
<li>Savings Savvy</li>
<li>Tech Savvy</li>
<li>Traditional Momma</li>
</ul>
</li>
</ul>
</nav>
My css code:
body {
background-color: beige;
color: lightblue;
padding: 0;
margin:0;
}
header {
background-color: lightblue;
padding: 5px 0;
margin: 0;
}
header h1 {
color: cadetblue;
font-family: Arial;
margin: 0;
padding: 5px 15px;
display: inline;
}
.navMenu{
display: inline;
margin: 0;
}
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
}
.navMenu .parentMenu a{
color: azure;
}
.navMenu .parentMenu .sub-menu{
display: none;
}
.navMenu .parentMenu:hover .sub-menu{
display: block;
position: absolute;
list-style-type: none;
margin:0;
}
.parentMenu:hover .sub-menu li{
border: thin solid darkgray;
padding: 4%;
background-color: lightgray;
color: honeydew;
text-align: left;
white-space: nowrap;
width: 100%;
list-style-type: none;
margin: 0;
}
.parentMenu .sub-menu li:hover {
background-color: lightsteelblue;
}
.section {
background-color: wheat;
color: darkslategray;
padding: 5px;
float: left;
display: inline;
width: 63%;
margin: 0 1% 1% 1%;
border-radius: 10px;
border: thin solid khaki;
box-shadow: lightgray;
}
#about {
float: right;
width: 30%;
margin: 1% 1% 0 0;
text-align: center;
}
#home{
margin: 1% 0 1% 1%;
}
h4, h3 {
color: lightseagreen;
}

Answer 1

This will align the submenu to the left:
.navMenu .parentMenu .sub-menu {
display: none;
position:absolute;
list-style-type: none;
padding:0;
margin: 0;
left:-1px;
top:27px;
}
.navMenu .parentMenu:hover .sub-menu {
display: block;
}
https://jsfiddle.net/am13qur4/

Answer 2

you did not specify where you want to align your drop down elements. Do you want to align all to the right, center or left. I assumed left so try adding the code below. You may need to adjust the left attribute's value and your hover background styling too.
.sub-menu a{
position: absolute;
left: 3%;
}
Let me know if this helps. Stay warm!