I cannot get my CSS drop down menu to work... Options

[WestX64]

I have been trying to figure out why my CSS drop down menu is not working for the better part of a hour now but cannot for the life of me figure it out. Any help / suggestions would be much appreciated!

My HTML code:

CODE

<div id="navigation">
                <nav>
                    <ul>
                        <!-- This is the base level navigation -->
                        <li><a href="#">January</a></li>
                            <ul>
                                <!--This is a second level drop down menu -->
                                <li><a href="#">Weel 1</a></li>
                                    <ul>
                                        <!--This is a third level pop out menu -->
                                        <li><a href="#">Homework 1</a></li>
                                        <li><a href="#">Lists 1</a></li>
                                        <li><a href="#">Sample 1</a></li>
                                    </ul>
                                <li><a href="#">Week 2</a></li>
                            </ul>
                        <li><a href="#">February</a></li>
                        <li><a href="#">March</a></li>
                    </ul>
                </nav>
            </div>

My CSS code:

CODE

#navigation {
    background-color: #00FF77;
    width: 80%;
    height: 60px;
    margin: 0px auto;
}

nav {
    margin: 0px auto;
    width: 100%;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: block;
}

nav ul li {
    float: left;
    display: list-item;
    list-style: none;
    background-color: #6600FF;
}

nav ul li a {
    display: block;
    padding: 10px 10px;
    color: black;
    font-size: 20px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
}

/* Hide the drop down and pop up menu levels by default */
nav ul ul {
    display: none;
    position: absolute;
    top: 58px;
}

/* Show the drop down and pop out menus on hover */
nav ul li:hover > ul {
    display: list-item;
}

/* First level drop down */
nav ul ul li {
    width: 170px;
    float: none;
    position: relative;
    border-bottom: none;
}

/* Secont level pop out menu */
nav ul ul ul li {
    position: relative;
    top: -58px;
    left: 170px;
}

[Christian J]

CODE

<li><a href="#">January</a></li>
<ul>

The UL above must be inside the LI.

CODE

<li><a href="#">Weel 1</a></li>
<ul>

Ditto...

The above should make the sub menu appear on hover, but it will close again when you try to hover a sub sub menu. Maybe that's caused by the positioning.

See also http://htmldog.com/articles/suckerfish/dropdowns/