Responsive menu not showing all my dropdown menus in mobile version - css

Question

If you reduce my test page here: http://www.linestop.com/Linestop2015/index.php
To display the mobile dropdown menu you will notice that not all my submenu items are displaying. How can I fix this? Can you help me?
Here is my CSS
#navigation { padding:0 21px; margin-bottom: 0; }
.sf-menu{
margin-bottom: 0;
}
.top-nav,.sf-menu li{
background: transparent;
}
.sf-arrows .sf-with-ul:after{
border-top-color: #ff9000;
}
.sf-menu ul li,.sf-menu ul ul li,.sf-menu ul ul ul li {
background: #fff;
}
.sf-menu li:hover, .sf-menu li.sfHover {
background: #ff9000;
}
.sf-menu a{
color: #070707;
border:none;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-size: 1.2em;
padding-left: 2em;
padding-right: 2em;
}
.small-top-menu{
display: none
}
.small-top-menu select{
padding: 5px;
background: #68ceef;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
border:5px solid #fff;
margin: 10px 0;
}
.small-top-menu select option{
padding: 10px;
}
#navigation ul li a { color: #4a4a4a; padding: 0 7px; display:block; height: 21px; line-height: 21px; border: 2px solid transparent; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; width:100% }
#navigation ul li.active a,
#navigation ul li a:hover { border: 2px solid #029cdb; background: url(images/nav-btn.png) repeat-x 0 0; color:#fff; text-decoration: none; }
#navigation a.nav-btn { display:none; }
Here is my mobile menu css
#navigation { position:relative; z-index: 100; padding:0 0px; margin:0 10px; }
#navigation a.nav-btn { margin-bottom: 15px; text-decoration: none; padding:0 36px 0 10px; line-height:30px; display:block; background: url(images/navigation.png) repeat-x 0 0; height: 30px; position: relative; }
#navigation a.nav-btn span { background: url(images/dd-nav-arrs.png) no-repeat 0 bottom; width: 20px; height: 15px; position:absolute; top: 8px; right: 12px; }
#navigation a.nav-btn.active span { background-position:0 0; }
#navigation ul { display:none; position: absolute; top: 30px; left: 0; width: 100%; }
#navigation ul li { float:none; height: 30px; border-top: 1px solid #fff; display:block; padding:0 0 0 0; background: url(images/navigation.png) repeat-x 0 0; }
#navigation ul li a { border: 0; line-height:30px; float:none; height: 30px; display: block; font-size: 14px; padding-left: 20px; padding-right: 20px; width:100%; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
#navigation ul li a:hover { background-image:url(images/blue-btn.png); border:0; }
#navigation ul li.active span { background: transparent; border:0; }
#navigation ul li.first { display:block; }
Here is my html code
<nav id="navigation"> HOME<span></span>
<section>
<ul class="sf-menu large-12">
<li class="active">Home</li>
<li class="has-dropdown">Services
<ul class="dropdown">
<li class="has-dropdown">Hottap Services
<ul class="dropdown">
<li>Hottap Free Quote</li>
</ul>
</li>
<li>Linestop Services
<ul class="dropdown">
<li>Linestop Free Quote</li>
</ul></li>
<li>Valve Installations Services
<ul class="dropdown">
<li>Valve Install Free Quote</li>
</ul></li>
<li>Pipeline Bypass Services
<ul class="dropdown">
<li>Pipe Bypass Free Quote</li>
</ul></li>
</ul>
</li>
<li class="has-dropdown">Line Stop Equipment
<ul class="dropdown">
<li class="has-dropdown">Hottap Machines
<ul class="dropdown">
<li>Small Machines</li>
<li>Large Machines</li>
</ul>
</li>
<li>Linestop Machines
<ul class="dropdown">
<li>QualTech QT Linestop Machines</li>
<li>IFT Soft Stop 100</li>
<li>IFT Top Pivot Stop 1000</li>
<li>IFT Folding Heads</li>
</ul></li>
<li>Hottap / Linestop Fittings
<ul class="dropdown">
<li>IFT 499 Fittings Copper, Steel & PVC</li>
<li>IFT Mechanical Joint Fittings</li>
<li>IFT Stainless Steel Hottap Linestop Fittings</li>
<li>IFT On-Size Folder Weld Type Fittings</li>
<li>IFT 400 Series Fittings CMLC</li>
<li>IFT 500 Series Fittings CMLC</li>
<li>AWWA - Fittings</li>
<li>Flanged Steel Knife Gate Valves</li>
<li>Completion Plug Assemblies</li>
</ul></li>
<li>All 2.5"-54.6" Linestop™ Cups</li>
</ul>
</li>
<li class="has-dropdown">About us
<ul class="dropdown">
<li>Contact Us</li>
<li>Customers</li>
<li>Location</li>
<li>Job Application</li>
<li>Online Flip Catalog</li>
<li>Facebook Fan Page</li>
</ul>
</li>
<li>Featured Jobs</li>
</ul>
</section>
<div class="cl"> </div>
</nav>
Thanks, Jesse

Answer 1

Look at the #navigation ul styling, the position: absolute; property should only be applied to the first UL ('.sf-menu'). Also check the .sf-menu ul styling, it should have an absolute position. And remove the height from #navigation ul li, because some li items have sub menus but you can't see them because the height is only 30px.

Answer 2

I figured out the answer to my issue. trying to make the menu too complex there were no easy fixes. So i had to go back to the original code and just use the mobile menu for the main navigation menu. Seems to work fine... Thanks for for the help!