Drop down menu issues

Question

I have a main menu with few sub pages that I want to show in a drop down menu. I am using CSS to hide all the "ul" that are inside the Main Menu "ul", and show the nested "ul" when hover over the main "ul (li's)"

It is not really working, I simply want to make it that when you hover over a tab from the main menu the sub menu just inside it will show as a drop down menu, and then when you hover out of the drop down menu or hover over anther main menu tab the drop down menu will go away.

Any ideas of how I would do that?

Here is the HTML:

            <div id="headerLogo">
                <?php include ("assets/templates/header-logo.inc"); ?>
            </div>

            <nav><ul id="mainMenu"><!--Main Menu-->
                <li><a href="#">Home</a>
                    <ul>
                        <li><a href="Intro1.php">Intro 1</a></li>
                        <li><a href="Intro2.php">Intro 2</a></li>
                        <li><a href="Intro3.php">Intro 3</a></li>
                        <li><a href="Vision.php">Vision</a></li>
                        <li><a href="Contacts.php">Contacts</a></li>
                        <li><a href="Staff.php">Staff</a></li>
                        <li><a href="Use.php">Use</a></li><li>
                        <li><a href="Crisis.php">Crisis</a></li>
                    </ul></li>
                <li><a href="#">Basics</a>
                    <ul>
                        <li><a href="Definition1.php">Definition 1</a></li>
                        <li><a href="Definition2.php">Definition 2</a></li>
                        <li><a href="Definition3.php">Definition 3</a></li>
                        <li><a href="Assess1.php">Assess 1</a></li>
                        <li><a href="Assess2.php">Assess 2</a></li>
                        <li><a href="Assess3.php">Assess 3</a></li>
                    </ul></li>
                <li><a href="#">Need</a>
                    <ul>
                        <li><a href="World1.php">World 1</a></li>
                        <li><a href="World2.php">World 2</a></li>
                        <li><a href="World3.php">World 3</a></li>
                        <li><a href="Polar1.php">Polar 1</a></li>
                        <li><a href="Polar2.php">Polar 2</a></li>
                        <li><a href="Polar2.php">Polar 3</a></li>
                        <li><a href="National.php">National 1</a></li>
                        <li><a href="Nationa2.php">National 2</a></li>
                        <li><a href="Nationa3.php">National 3</a></li>
                        <li><a href="Alaska1.php">Alaska 1</a></li>
                        <li><a href="Alaska2.php">Alaska 2</a></li>
                        <li><a href="Alaska3.php">Alaska 3</a></li>
                        <li><a href="Alaska4.php">Alaska 4</a></li>
                        <li><a href="Fairbanks.php">Fairbanks</a></li>
                    </ul></li>
                <li><a href="#">Models</a>
                    <ul>
                        <li><a href="Durkheim.php">Durkheim</a></li>
                        <li><a href="Joiner.php">Joiner</a></li>
                        <li><a href="nami.php">NAMI</a></li>
                        <li><a href="Mental.php">Mental</a></li>
                        <li><a href="Church.php">Church</a></li>
                        <li><a href="Menninger.php">Menninger</a></li>
                        <li><a href="Weaver-Wright.php">Weaver/Wright</a></li>
                    </ul></li>
                <li><a href="#">Approach</a>
                    <ul>
                        <li><a href="Trees1.php">Trees 1</a></li>
                        <li><a href="Trees2.php">Tress 2</a></li>
                        <li><a href="Goals1.php">Goals 1</a></li>
                        <li><a href="Goals2.php">Goals 2</a></li>
                        <li><a href="Training1.php">Training 1</a></li>
                        <li><a href="Training2.php">Training 2</a></li>
                        <li><a href="Gas1.php">Gas 1</a></li>
                        <li><a href="Gas2.php">Gas 2</a></li>
                        <li><a href="Boat1.php">Boat 1</a></li>
                        <li><a href="Boat2.php">Boat 2</a></li>
                    </ul></li>
                <li><a href="#">Library</a>
                    <ul>
                        <li><a href="Stories.php">Stories</a></li>
                        <li><a href="Books.php">Books</a></li>
                        <li><a href="Plays.php">Plays</a></li>
                        <li><a href="Epics.php">Epics</a></li>
                        <li><a href="Movies.php">Movies</a></li>
                        <li><a href="Articles.php">Articles</a></li>
                    </ul></li>
                <li><a href="#">Web</a>
                    <ul>
                        <li><a href="Arctic.php">Arctic</a></li>
                        <li><a href="National.php">National</a></li>
                        <li><a href="Supports.php">Supports</a></li>
                        <li><a href="Reference.php">Reference</a></li>
                    </ul></li>
            </ul></nav>

        </div>
    </header>

CSS:

/*Main Menu*/#mainMenu {
    margin-top: 10px;
    float: right;
}

    ul#mainMenu ul {
        display: none;
    }

        ul#mainMenu li:hover > ul {
            display: block;
            background-color: #F7F7F7;
            width: 145px;
            position: absolute; top: 100%;
        }

        ul#mainMenu li ul li {
            float: none;
            width: 100%;
        }


    #mainMenu li {
        float: left;
    }

    #mainMenu a {
        color: #595959;

        width: 100%;
        padding: 10px 15px;
        margin-left: 5px;

        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;

        -webkit-transition: background 0.1s linear;
        -moz-transition: background 0.1s linear;
        -ms-transition: background 0.1s linear;
        -o-transition: background 0.1s linear;
        transition: background 0.1s linear;
    }

    #mainMenu a:hover {
        color: #4E6C98; 
    }   

    #mainMenu a.active {
        color: #ffffff;
        background-color: #4E6C98;
        cursor: default;
    }

Answer 1

Try adding position: relative; on #mainMenu li. Your dropdowns are positioned absolutely but have nothing to be relative to.