html - How to make nav submenus open above and below main bar, so no need to scroll

Question

I have a navigation bar created with html and css, it works well but I can't figure out how to get my sub menus to go above and below the bar when hovered, instead of all of them going below the bar, resulting in you having to scroll down the page.

Here is the html and css.

    <nav>
    <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a>
        <ul>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
        </ul>
    </li>
    <li><a href="#">Four</a>
        <ul>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
        </ul>
    </li>
    <li><a href="#">Five</a>
        <ul>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
        </ul>
    </li>
    <li><a href="#">Six</a></li>
    </ul>
    </nav>




    <!-- language: lang-css -->

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    !border-radius: 10px;  
    list-style: none;
    position: relative;
    top:245px;
    display: inline-table;
}
nav ul:after {
    content: "";
    clear: both;
    display: block;
}

nav ul li {
    float: left;
}
nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
    nav ul li:hover a {
        color: #fff;
    }

nav ul li a {
    display: block;
    padding: 10px 32px;
    color: #757575;
    text-decoration: none;
    font-size: 13px;
}

nav ul ul {
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
}
nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}   
nav ul ul li a:hover {
    background: #4b545f;
}

nav ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}