I am trying to learn how to do cool CSS3 menues. I have a good understanding of CSS, but I can't seem to fix this problem.

Here is my code so far:

/* Menu 2 */
ul{
    list-style:none;
    width:150px;
    height:auto;
    background-color:#FFF;
    padding:0px;
}

ul li{
    padding:15px;
    list-style:none;
    color:#333;
    background-color:#09C;
}

ul li ul{
    width:135px;
    height:auto;
    display:block;
    padding:0px;
    background-color:#FFF;
}

ul li ul li{
    background-color:#FFF;
    list-style:none;
    padding:0p;
    margin:0px;
}

And here is my HTML:

<!-- Navigation -->
<div class="Container-1A">
    <ul>
        <li>Animals
            <ul>
                <li>Bears</li>
                <li>Cats</li>
                <li>Dogs</li>
                <li>Bats</li>
            </ul>
        </li>
        <li>People
            <ul>
                <li>Fat</li>
                <li>Ugly</li>
                <li>Beautiful</li>
                <li>Sexy</li>
            </ul>
        </li>
        <li>Wallmart
            <ul>
                <li>People</li>
                <li>Celebrities</li>
            </ul>
        </li>
        <li>Abstract</li>
        <li>Techno</li>
        <li>Rap</li>
    </ul>
</div>

Here is the page to the result of the above: http://www.farrislab.net/testing/
Here is what I want to accomplish: http://www.farrislab.net/testing/index-2.html

Don't worry about the Javascript part. I just want to perfect the CSS3 part.

But... but... you have a complete working example with HTML & CSS (and jQuery to trigger the open/close functionality), so how about looking at the code of that example to learn from it.

What you see so far in your implementation is exactly what you have in your CSS, so what's the problem?

Sorry, I just realized that this is a stupid question. I have solved the problem

Okay... just to let you know... the default value of the height property is auto, so it's redundant to declare it in your css.