Здравствуйте.
Занимаюсь самообучением, если у кого-то есть минутка не проигнорируйте направьте меня в правильное логическое русло

Не хватает опыта и пока не так много знаний. Передо мной сейчас стоит такая задача
Скажу сразу, что длинные замороченные коды-плагины меню из интернета мне не подходят.

Для меня важно минимальное кол-во строк. Я что-то написал вроде бы по логике должно работать, но последний уровень ul не открывается
http://jsfiddle.net/Eur2r/
Как должно работать: изначально видно только первый уровень списка ul li, по клику должен открыться второй уровень списка для текущего li и аналогично для последнего уровня. Направьте меня где ошибка? Или может здесь увидите, как это реализовать еще проще? При всем при этом каждое нажатие на определенном уровне должно скрывать братьев селекторов и отображать только тот который на котором в данный момент срабатывает событие.
Спасибо за ранее!