Вам не нужно использовать JavaScript (если вам не нужна совместимость с устаревшими браузерами), вы можете добиться этого с помощью только HTML + CSS. И гораздо более семантически правильным способом. :)

Вы можете создать вертикальные выпадающие меню или (более красивый пример) горизонтальные меню , используя методы, описанные в статье Sons of Suckerfish на сайте HTMLDog.
Просто и содержательно.

Пример

Вот простой пример. В нем вы можете увидеть, что функция наведения курсора работает отлично.

CSS не очень хорош, потому что это всего лишь образец.
Чтобы работать со стилем, отключите строку display: none; : это предотвратит скрытие подменю, когда они не наведены, и вы можете работать над стилизацией всего.
Когда вы закончите, просто снова включите строку display: none; , чтобы подменю скрывались и отображались только при наведении курсора.

HTML

<nav>
<p>Collapsing:</p>
<ul class="collapsable">
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
<p>Not collapsing:</p>
<ul>
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
</nav>

CSS

nav li:hover {
    background: #EEEEEE;
}
nav li>ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}
nav .collapsable li>ul {
    display: none;
}
nav li>ul::before {
    content: ": { ";
}
nav li>ul::after {
    content: " } ";
}
nav li:hover>ul {
    display: inline-block;
}
nav li>ul>li {
    display: inline-block;
}
nav li>ul>li+li::before {
    content: ", ";
}

Вот jsfiddle: http://jsfiddle.net/x8dxv/

Возможно, вы захотите изучить некоторые онлайн-инструменты, которые создают меню для вас. Например. Генератор меню CSS

Вы можете использовать JavaScript для создания меню - например, посмотрите плагин jQuery - Дерево меню .

С небольшим количеством JavaScript и знаниями CSS вы можете преобразовать простой список UL LI в меню дерево. его право, что вы можете использовать jQuery, если вы его понимаете.

Вы можете сузить область поиска Google по дереву меню с помощью UL Li. или CSS для преобразования UL LI в дерево.

Меню навигации в основном создаются с использованием комбинации UL и LI.

<UL id="Menu">
    <LI>Home</LI>
    <LI>Links</LI>
</UL>

И вы можете вставить UL внутрь элемента LI и таким образом получить древовидную структуру для навигации.

Вот простой способ сделать это, если вы не хотите писать его сами...

http://www.mycssmenu.com/#css-menu-demo

Я не уверен, что вы найдете ответ, но вот список с несколькими различными типами вертикальных меню http://css.maxdesign.com.au/listamatic2/index.htm в этих примерах не задействован javascript