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

i hope i'm explaining clearly. can view site at: http://membershq.incentiveusa.com/awardpages/goalup_test2/index_test2.html

the navigation menu, when in mobile format, has drop down links on top of main navigation rather nesting within , pushing rest of 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 ul of padding , list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position: relative; z-index: 1000; text-align:center;    }  /*create horizontal list spacing*/ .navigation li{ display:inline-block; margin-right: 0px; background-color:#0f9bde; vertical-align: top; }  /*style menu links*/ .navigation li {  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 top level links*/ .navigation li:hover { color: #f7a800; text-decoration: underline; }  /*style dropdown links*/ .navigation li:hover ul { background: #f7a800; color: #ffffff; height: 40px; line-height: 40px;  }  /*hover state dropdown links*/ .navigation li:hover ul a:hover { background: #fff; color: #f7a800; }  /*hide dropdown links until 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 { width: auto; min-width: 100px; padding: 0 20px; }  .navigation ul li:hover ul{ display:block; }  /*display dropdown on hover*/ .navigation ul li a:hover  { display: block;  }    /*style 'show menu' label button , hide 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 checked*/ input[type=checkbox]:checked ~ #menu{ display: block; }  #menu ul {min-width: 189px; }  /*responsive styles*/  @media screen , (max-width : 975px){ /*make dropdown links appear inline*/ .navigation ul {     position: static;     display: none; } /*create vertical spacing*/ .navigation li {     margin-bottom: 1px; } /*make menu links full width*/ .navigation ul li, li {     width: 100%; } .navigation li ul li {     width: 100%; } #menu ul {min-width: 100%;} /*display 'show menu' link*/ .show-menu {     display:block; } } 

here 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>                     <a href="about.html">about us</a>                     <ul>                         <li>                             <a href="news.html">news</a>                         </li>                     </ul>                 </li>                 <li>                     <a href="howitworks.html">how works</a>                     <ul>                         <li>                             <a href="factsstats.html">facts</a>                         </li>                         <li>                             <a href="parentingtools.html">tools</a>                         </li>                     </ul>                 </li>                 <li>                     <a href="testimonials.html">testimonials</a>                 </li>                 <li>                     <a href="awards.html">brand name awards</a>                 </li>                 <li>                     <a href="contact.html">contact</a>                 </li>             </ul>         </div>     </div> </div> 

your problem has style:

.navigation li ul{     display: none;     position: absolute; } 

remove position: absolute;, needed @ mobile break point.

like this:

@media screen , (max-width : 975px){   .navigation li ul{       position: static;   } }