Иерархический список с использованием HTML / CSS

Question

Я пытаюсь создать меню верхнего уровня, как вы видели бы в большинстве приложений, используя HTML, CSS и Javascript. Я знаю, что есть множество готовых, но я хочу создать свой собственный.

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

Я пробовал разные стили CSS, чтобы правильно расположить следующий список. Это подходящая структура HTML, или вы бы порекомендовали другую? Какой CSS требуется для правильной верстки меню? На данный момент меня не интересует функциональность.

Я открыт для любых техник HTML 5, поскольку это только личный проект.

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

Answer 1

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

Взгляните на образец здесь:

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