Rozwijalne menu

Witam,

jestem początkujący w programowaniu w javascript dlatego proszę o wyrozumiałość :D. Stworzyłem rozwijalne menu.Pierwsza kategoria rozwija mi się dobrze ale druga już rozwija mi się w tym samym miejscu co pierwsza.Wiem że chodzi tu o element ul.menuDropDown który ostylowałem na sztywno w css.Chciałbym jednak żeby podkategorie rozwijały mi się pod daną kategorią tak jak to mam w html.

http://codepen.io/Master7/pen/ZWWvjJ

Proszę o pomoc i ewentualne uwagi:)Chętnie słucham ciekawych rad i wyciągam wnioski :)

1. JS jest Ci w teorii niepotrzebny. Fakt, że jest przydatny, ale Twój JS tylko szkodzi Twojemu menu, a nie pomaga go stworzyć.

2. Używaj chociaż codepenowego "Tidy" zanim coś opublikujesz, chociaż udawaj, że Twój kod nie wygląda jak kupa.

3. http://codepen.io/anon/pen/pyyLQz

1.Czemu szkodzi:)? 2.Czemu mam tego używać?:) 3.Dzięki za pomoc :D!!

1. najedź i zjedź myszą szybko parę razy na pozycje menu
2. bo kod bez wcięć albo z losowymi wcięcami wygląda jak kupa
3. proszę :)

Może nie tyle, że js szkodzi, ale spokojnie dałoby się to zrobić na samym css, pewnie mniej pisania, prościej i wydajniej, chociaż w tak prostym przykładzie to i tak nie ma znaczenia. Normalnie rozwijana lista mogłaby mieć height: 0px; a po najechaniu height: auto; i razem z transition.

Po co używasz w swoim js metody stop() ? Jeśli chcesz czyścić kolejkę animacji, to raczej umieściłbym go przed metodami animującymi slideDown() i slideUp()
http://codepen.io/anon/pen/grMyXZ