CSS Drop Down menus won't align with parent Menus - css

Question

Having trouble getting the drop-down menus to be directly aligned with the parent ones - at the moment they always fall from the center of the top one, see image.
My code:
body {
background: url('body-bkg.jpg');
background-repeat: no-repeat;
background-position: center top;
}
#navMenu {
margin: 0;
padding: 0;
text-align: center;
}
/*controls top parent box in navigation bar*/
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
}
/*controls top parent box in navigation bar*/
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
background-color: hsla(0, 9%, 202%, 0.7);
float: left;
}
#navMenu ul li {
position: relative;
}
/*controls link text parent and children boxes in navigation bar*/
#navMenu ul li a {
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #2e1c1c;
border: 1px solid #000;
}
/*controls children boxes in navigation bar*/
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
/*controls children boxes in navigation bar when hovered on parent box*/
#navMenu ul li:hover ul {
visibility: visible;
}
/*controls parent box when hovered on children box*/
#navMenu li:hover {
background: #387cf7;
}
/*controls child box when hovered on child box*/
#navMenu ul li:hover ul li a:hover {
background: white;
}
<div id="navMenu">
<ul>
<li>Destinations
<ul>
<li>Asia </li>
<li>Africa </li>
<li>Europe </li>
<li>North America </li>
<li>South America </li>
<li>Antartica </li>
</ul>
</li>
<li>Holiday Types
<ul>
<li>Short Breaks </li>
<li>Beaches </li>
<li>Adventure </li>
<li>Walking </li>
<li>Continents </li>
<li>Safari </li>
<li>Cruise </li>
<li>Family </li>
<li>Ultimate </li>
</ul>
</li>
<li>When to go
<ul>
<li>Winter </li>
<li>Spring </li>
<li>Summer </li>
<li>Autumn </li>
</ul>
</li>
<li>Corporate </li>
<li>Special Offers </li>
<li>About Us </li>
<li>Blog </li>
<li>Contact </li>
</ul>
</div>

Answer 1

This solution may work for you:
Demo Fiddle
I see you're using visibility:hidden a lot, but In situations like this I find display: none to be easier to work with.
CSS:
#navMenu ul ul {
// current styles
left: 0px;
}