Hierarchical List using HTML/CSS

Question

I am trying to create a top-level menu like you would see in most applications, using HTML, CSS & Javascript. I know there's a ton of pre-built ones, but I want to create my own.

----------------------
| File | Edit | Help |
----------------------
| New     |
| Save    |
| Save As |
 ---------

I've been trying various CSS styles to get the following list to layout properly. Is this the appropriate HTML structure, or would you recommend a different one? What CSS is required to properly layout the menu? I'm not concerned about functionality at this point.

I'm open to any HTML 5 techniques as this is only a personal propject.

<ul>
    <li>File</li>
    <ul>
        <li>New</li>
        <li>Save</li>
        <li>Save As</li>
    </ul>
    <li>Edit</li>
    <ul>
        <li>Cut</li>
        <li>Copy</li>
        <li>Paste</li>
    </ul>
    <li>Help</li>
    <ul>
        <li>About</li>
    </ul>
</ul>

Your html markup is not right. ul can't be inside another ul directly. It should be inside a li ot the top ul. — morgar
– morgar, Commented Jun 5, 2011 at 18:56

Konstantin Tarkus · Accepted Answer · 2011-06-05 18:53:49Z

9

<ul>
    <li>
        <a href="#">File</a>
        <ul>
            <li><a href="#">New</a></li>
            <li><a href="#">Save</a></li>
            <li><a href="#">Save As</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Edit</a>
        <ul>
            <li><a href="#">Cut</a></li>
            <li><a href="#">Copy</a></li>
            <li><a href="#">Paste</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Help</a>
        <ul>
            <li><a href="#">About</a></li>
        </ul>
    </li>
</ul>

Take a look at sample here:

http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

answered Jun 5, 2011 at 18:53

Konstantin Tarkus

38.6k14 gold badges137 silver badges123 bronze badges

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

Collectives™ on Stack Overflow

Hierarchical List using HTML/CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related