How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

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;
}

rcravens · Accepted Answer · 2011-01-20 22:17:18Z

2

Here is a working demo:

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

Two things I did.

A bit of restructuring the ul/li list. There were some elements not in the li.
Used 'li:hover > ul' to select the direct children only.

Hope that helps.

Bob

answered Jan 20, 2011 at 22:17

rcravens

8,3982 gold badges35 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

plebksig · Accepted Answer · 2011-01-20 22:18:35Z

0

Try to add

ul li ul{position: absolute; top: 0; left: 0; width: 250px; height: 250px; background-color: #EEE;}

And go from there :)

answered Jan 20, 2011 at 22:18

plebksig

5355 silver badges22 bronze badges

Comments

Bhavya · Accepted Answer · 2011-01-20 22:23:46Z

0

The way you have structured your css causes all of "Basketball"'s descendants to inherit its css. You should be using a child(">") or :first-child selector instead. Look at sections 5.5 and 5.6 here to know what I am talking about: http://www.w3.org/TR/CSS2/selector.html

If you are looking to do dynamic menus I'd strongly recommend using javascript over relying purely on css, unless you are certain a lot of people viewing your website are going to have their javascript turned off.

answered Jan 20, 2011 at 22:23

Bhavya

2831 silver badge12 bronze badges

Collectives™ on Stack Overflow

How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related