Как правильно.. Лично я считаю что любые двигающиеся и дергающиеся штуки на сайтах это зло, а тем более изначально скрытые как выпадающие менюшки. Ну а по сабжу, если уж делать на js, то я бы написал какое нибудь API которое и
создает менюшку, а то вы ее разверстали, а потом скриптом подобрали. Чтобы был механизм, создающий меню. Например чтобы было как то так
document.body.appendChild(
MyMenyCreator(
[
{
title: "Главная",
url: "http://"
},
{
title: "Блог",
url: "http://"
},
{
title: "Портфолио",
url: "http://"
sub:[
{
title: "Верстка",
url: "http://"
},
{
title: "Скрипты",
url: "http://"
},
{
title: "Фотошоп",
url: "http://"
},
]
},
{
title: "Обо мне",
url: "http://"
}
]
)
)
Я бы сделал так, то есть функция ест параметры а возвращает готовый узел, естественно она также должна принимать стили, обработчики и прочее, все что вам нужно. Или по-другому можно спроектировать интерфейс. Например можно сделать MyMenuCreator синглтоном с методами, настраивающими менюшку, и методом, отдающим ее готовенькую. Вариантов много, фантазируйте
Я считаю что скрипт должен быть такой, чтобы его можно было легко применить, а также при желании расширить новыми функциями, возможностями, не обязательно через API, но хотя бы, добавив, скажем в какой нибудь приватный набор какой нибудь новый элемент. Или через прототип удобно расширять. Ну это все чисто мое мнение и я говорю как бы старался сделать я)
А у вас как то смешано все и вовсе не гибко, например обработчики через аттрибуты назначены, то есть мне чтобы применить ваш скрипт, нужно переверстать свою менюшку. Можно еще например попробовать такой вариант, скрипт принимает узел ul, и по определенным правилам, придуманными вами его сворачивает, например если в li вложен ul, то сделать тот ul выпадающим и т.п. Так что вот пара советов, раз вы хотите разработать гибкий интерфейс (но допускайте что я вам тут мог наврать
)