Question

Newbie to CSS and can only find single level menus. Here’s the Menu and the list items:

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Forums</a>
        <ul>
            <a href="#">Basketball</a>
            <ul>
                <li>
                    <a href="#">Trading</a>
                </li>
                <li>
                    <a href="#">Personal Collections</a>
                </li>
                <li>
                    <a href="#">Box Breaks</a>
                </li>
            </ul>
        </ul>
    </li>
</ul>

As you can see, it would be multi-tiered. Now, with the CSS I have, only Home and Forums are displayed first, and when I hover over Forums, Basketball is displayed…but so are the subsequent menu items. I want those to stay hidden until I hover over basketball. Anyone know how to do this with just CSS or as little JavaScript as possible? Thanks. Here’s the CSS code I have:

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}

ul li
{
    position: relative;
}

li ul
{
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a
{
    display: block;
    text-decoration: none;
    color: #777;
    background: #bad8f8;
    padding: 2px 0 2px 10px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

li:hover ul
{
    display: block;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

Answer 1

Here is a working demo:

http://jsfiddle.net/rcravens/aqz8q/

Two things I did.

1. A bit of restructuring the ul/li list. There were some elements not in the li.

2. Used ‘li:hover > ul’ to select the direct children only.

Hope that helps.

Bob