CSS Mobile Navigation menu - drop downs not nesting properly - html

Question

I hope that I'm explaining this clearly. You can view my site at: http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test2.html
The navigation menu, when in mobile format, has the drop down links on top of the main navigation rather than nesting within and pushing the rest of the links down.
CSS:
.navigation{
margin-right: auto;
margin-left: auto;
width: 100%;
background-color: #0f9cde;
position: absolute;
display: block;
margin-bottom: 15px;
z-index: 1000;
top: 735px;
margin-left: -15px;
}
/*Strip the ul of padding and list styling*/
.navigation ul{
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 1000;
text-align:center;
}
/*Create a horizontal list with spacing*/
.navigation li{
display:inline-block;
margin-right: 0px;
background-color:#0f9bde;
vertical-align: top;
}
/*Style for menu links*/
.navigation li a {
min-width: 189px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Maven Pro', sans-serif;
font-size:18px;
color: #fff;
width:100%;
background-color: #0f9cde;
text-decoration: none;
display:block;
}
/*Hover state for top level links*/
.navigation li:hover a {
color: #f7a800;
text-decoration: underline;
}
/*Style for dropdown links*/
.navigation li:hover ul a {
background: #f7a800;
color: #ffffff;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
.navigation li:hover ul a:hover {
background: #fff;
color: #f7a800;
}
/*Hide dropdown links until they are needed*/
.navigation li ul{
display: none;
position: absolute;
}
/*Make dropdown links vertical*/
.navigation li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
.navigation li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
.navigation ul li:hover ul{
display:block;
}
/*Display the dropdown on hover*/
.navigation ul li a:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family:'Maven Pro', sans-serif;
text-decoration: none;
color: #fff;
background: #f7a800;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
#menu ul {min-width: 189px; }
/*Responsive Styles*/
#media screen and (max-width : 975px){
/*Make dropdown links appear inline*/
.navigation ul {
position: static;
display: none;
}
/*Create vertical spacing*/
.navigation li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
.navigation ul li, li a {
width: 100%;
}
.navigation li ul li {
width: 100%;
}
#menu ul {min-width: 100%;}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
Here is the HTML:
<div class="container-fluid">
<div class="section-title2 text-center">
<div class="navigation">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>
About Us
<ul>
<li>
News
</li>
</ul>
</li>
<li>
How It Works
<ul>
<li>
Facts
</li>
<li>
Tools
</li>
</ul>
</li>
<li>
Testimonials
</li>
<li>
Brand Name Awards
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>

Answer 1

Your problem has to do with this style:
.navigation li ul{
display: none;
position: absolute;
}
Remove the position: absolute;, probably needed at you mobile break point.
Like this:
#media screen and (max-width : 975px){
.navigation li ul{
position: static;
}
}