drop down menu positioning

Question

I'm trying to build a drop-down menu using CSS, and I've successfully hidden the drop down menu, but haven't been able to make it reappear. I'm pretty sure that the problem is with the :hover tag, which I've taken out of the css here because I haven't been able to make it work. Help with the CSS? PLEASE? Desperate.

HTML Code:

<div id="navigation">
    <ul id="menu">
        <li class="menu"><a href="#home">Home</a></li>
        <li class="menu"><a href="#news">About Us</a></li>
        <ul class="sub_menu">
            <li>Our Mission Statement</li>
            <li>How Funds Are Spent</li>
            <ul class="sub_sub_menu">
                The Founders
                <li>A</li>
                <li>B</li>
                <li>C</li>
                <li>D</li>
                <li>E</li>
                <li>F</li>
            </ul>
        </ul>
        <li class="menu"><a href="#contact">What We Do</a></li>
        <ul class="sub_menu">
            <li>T-Shirt Designs</li>
            <li>Future Design Ideas</li>
            <ul class="sub_sub_menu">
                Fact Sheets
                <li>How Our Fact Sheets Work</li>
                <li>Fact Sheet 1</li>
            </ul>
        </ul>
        <li class="menu"><a href="#about">Media</a></li>
        <li class="menu"><a href="#contact">Contact Us</a></li>
    </ul>
</div>

CSS is as follows:

ul {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 0px;
    padding-bottom: 0px;
}
li.menu {
    display: inline
}
a:link, a:visited {
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #B4B7BD;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 20px;
    padding-left: 20px;
    text-decoration: none;
    text-transform: uppercase;
}
a:hover, a:active {
    background-color: #B4B7BD
}
ul.sub_menu li {
    position: relative;
    display: none;
    width: 100%;
}
ul.sub_sub_menu {
    position: relative;
    display: none;
}
ul.sub_sub_menu li {
    position: relative;
    display: none;
    width: 100%;
    left: 100%;
}

Answer 1

HTML issues

First of all

<ul class="sub_sub_menu">The Founders

It's illegal to have text inside an unordered list tag, if this is meant to the the title of the list, then the title needs to be the text/link in the list item that the unordered list is nested inside of.

Also, you've done this several times:

<li class="menu"><a href="#news">About Us</a></li>
    <ul class="sub_menu">
        <li>Our Mission Statement</li>
        <li>How Funds Are Spent</li>
    </ul>

where your code needs to be:

<li class="menu"><a href="#news">About Us</a>
    <ul class="sub_menu">
        <li>Our Mission Statement</li>
        <li>How Funds Are Spent</li>
    </ul>
</li>

You can see, the unordered list is nested properly in the second example, however in the first on it's not, causing you issues.

Those are the HTML problems I think, now to the css.

CSS issues

You should only have to add code to your css to make that work, here is an example of how to make the first submenu show up when you rollover a menu item.

li.menu:hover ul li {
        display: block;
}

Just repeat that for the various sub & sub-sub menues you have.

The last thing is your use of selectors is a little sketchy, if you have ".sub_menu" as a class, then you don't need to prefix it with the element type unless multiple types of elements with the class and you want to select a single one, which is something I can't see you doing with your site, so instead of:

li.menu
ul.sub_menu
ul.sub_sub_menu

just use the class as a selector:

.menu
.sub_menu
.sub_sub_menu

This practice is faster for rendering in modern browsers, and clearer to read in many ways.

And there you go! it should all work nicely now.