I have a nested ul in my nav, why does it not show everything in the list for mobile?

Question

For my main navigation I have a nested ul that is only displaying the first 6 li when Products is clicked. How do I get them all to display when the user clicks Products? Is it a CSS thing or a script problem? Here's a screenshot.

HTML:

    <nav>
        <a class="burger_nav"></a>
        <span id="logo_link">
            <a href="#"><img src="images/nav_logo.gif" alt="Company logo. Links to home page." width="100%"></a>
        </span>
        <ul>
        <span id="phonly"><li><a href="#">Home</a></li></span>
           <li><a class="sub_drop">Products</a>
                <ul>
                    <li><a href="#">Resilient Floor</a></li>
                    <li><a href="#">Wood Floor</a></li>
                    <li><a href="#">Food Service</a></li>
                    <li><a href="#">Dilution Control</a></li>
                    <li><a href="#">Carpet Care</a></li>
                    <li><a href="#">General Cleaners</a></li>
                    <li><a href="#">Disinfectants</a></li>
                    <li><a href="#">Industrial</a></li>
                    <li><a href="#">Restroom Care</a></li>
                    <li><a href="#">Hand Care</a></li>
                    <li><a href="#">Laundry Care</a></li>
                    <li><a href="#">Green Products</a></li>
                    <li><a href="#">International</a></li>
                </ul><!-- dropdown -->
            </li>
            <li><a href="#">SDS</a></li>
            <li><a href="#">Libraries</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
<div class="clear"></div>

Script:

//// phone nav burger

    $(document).ready(function(){
        $(".burger_nav").on("click", function(){
            $("nav ul").toggleClass("open");
        });
    });

   //// phone nav products
    $(document).ready(function(){
        $(".sub_drop").on("click", function(){
            $("nav ul ul").toggleClass("open");
        });
    });

CSS:

/*********** NAVIGATION (full screen)************/
#phonly{
    display:none;
}

#logo_link{
    float:left;
    padding-top:9px;
    padding-top:0.47vw;
    width:128px;
    width:6.72vw;
    margin-left:3.9531%;
    margin-right:3.9531%;
}

nav{
    float:left;
    border-bottom:1px solid #BBB;
    z-index:4;

}

nav ul{
    list-style-type:none;
    text-align:left;    
}

nav ul li{
    float:left;
    position:relative;
    width:11.6399%;
    font-size:21px;
    font-size:1vw;
}

nav ul li:hover ul{
    left:0px;
    opacity:1;
}

nav ul li a{
    display:block;
    width:175px;
    padding:11px;
    padding:0.58vw;
    color:#000;
    background-color:#fff;
    text-decoration:none;
}

nav ul li a:hover{
    background-color:#003768;
    color:#fff;
}

nav ul li a:active{
    color:#F00;
}

nav ul ul{
    background-color:#999;
    opacity:0;
    position:absolute;
    left:-9999px;
    z-index:20;
}

nav ul ul li{
    float:none;
    color:#000;
}

nav ul ul li a:active{
    background-color:#000;
    color:#F00;
}

nav ul ul li a:visited{
    color:#003768;
}

nav ul ul li a:hover{
    background-color:#003768;
    color:#fff;
}


/************* MOBILE *********/
@media screen and (max-width:450px){

#logo_link{
    display:none;
}

#phonly{
    display:block;
}

.burger_nav{
    display:block;
    height:40px;
    width:100%;
    background:url(../images/burger.png) no-repeat 3% center;
    background-color:#404040;
    cursor:pointer;
}

nav{
    background-color:#fff;
    width:100%;
}

nav ul{
    list-style-type:none;
    text-align:left;
    overflow:hidden;
    height:0;   
}

nav ul.open{
    height:auto;
}

nav ul li{
    float:none;
    width:100%;
    font-size:21px;
}

nav ul li:hover ul{
    left:0px;
    opacity:1;
}

nav ul li a{
    display:block;
    width:100%;
    padding:11px;
    color:#000;
    background-color:#fff;
    text-decoration:none;
    border-bottom: 1px solid #444;
}

nav ul ul.open{
    height:auto
}

nav ul ul{

    list-style-type:none;
    text-align:left;
    overflow:hidden;
    height:0;   
}

nav ul ul li{
    float:none;
    color:#000;
}

.sub_drop{
    cursor:pointer;
}

nav ul ul li a{
    white-space:nowrap;
    width:100vw;
    background-color:#fff;
    color:#000;
    font-size:16px;
}

nav ul ul li a:visited{
    color:#003768;
}

nav ul ul li a:hover{
    background-color:#003768;
    color:#fff;
}

}

Any help would be appreciated. Did I write something wrong in the style sheet? Is the script incorrect? It's not my HTML is it? Thank you for your time.

Answer 1

Ok, I've tried your code here: http://jsbin.com/zabimicati/edit?css,output The issue in overflow:hidden; for nav ul in @media screen and (max-width: 450px). The easiest way to fix - remove it. But the question is how you expect it to work. E.g. you may add after overflow: hidden; additionally overflow-y: visible;