How do I create a Dropdown Menu which instead displays going upwards?

Question

I'm wondering how to create a drop down menu which is reversed so instead of the list dropping down below, The list goes upward. I currently have a menu set up but I can't find a way to reverse it.

CSS:

.subtitle
    {

       width: 612px;
       margin: 0 auto;
       left: 0px;
       background-color:black;
       border: 2px solid grey;
       position:absolute;
       display:inline;
       padding: 10px 0px 10px 10px; 
       top: 765px;
       right: 0px;
       font-family:"Myriad Pro";
       z-index:10;
    }            
/*Menu CSS */
    /* mainnav bar list */
    ul.mainNav {
        padding: 0px;
        margin: 0px;
        list-style: none;
        height: 30px;
        background-color: black;
        z-index:25;
    }

    /* mainnav links */
    ul.mainNav li {
        text-align:center;
        float: left;
        width: 150px;
        padding-left: 0px;
        position: relative;
        text-decoration: none;
        font-size:18px;
        z-index:25;
    }

    ul.mainNav li a {
        display: block;
        width: 150px;
        color: cyan;
        padding-top: 3px;
        padding-bottom: 7px;
        z-index:25;
    }

    ul.mainNav li a:hover {
        background-color: black;
        color:white;
        z-index:25;
    }

    /* subnav layer */
    ul.subNav {
        padding:0px;
        margin:0px;
        list-style:none;
        position: absolute;
        display: none;
        z-index:30;
    }

    ul.subNav li {
        display: block;
        padding-left: none;
        float: left;
        text-align: center;
        background-color: black;
        border-bottom: ridge 1px #4F0000;
        z-index:30;
    }

    /* subnav links */
    ul.subNav li a {
        float: left;
        display: block;
        width: 150px;
        height: 20px;
        padding-top: 9px;
        background-color: black;
        color: cyan;
        font-size: 11pt;
        z-index:30;

    }

    ul.subNav li a:hover {
        background-color: black;
        color: white;
        z-index:30;
    }

Here is my menu HTML

        <ul class="mainNav">

            <li><a href="Home.html">Home</a></li>
            <li>
                <!-- span gives clickable area to trigger event handler -->
                <span><a href="#">Content</a></span>

                <ul class="subNav">
                    <li><a href="clientside.html">Client Side</a></li>
                    <li><a href="web.html">Web</a></li>

                </ul>
            </li>

            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>

    </div>

if anyone could tell me what I need to change or add in to reverse the menu it would be very helpful!

Answer 1

you need to set vertical coordonates, here it could be for .subNav : bottom:30px; since this is height of the nav bar :

DEMO

mini patch to your example :

li:hover ul {
  display:block;
  bottom:30px;
}