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

Я пытаюсь создать меню верхнего уровня, как в большинстве приложений, используя 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>