Pływające elementy i problemy z animacją oraz zachowaniem układu, jQuery Opcje

[puz219]

Witam,

Tworzę sobie galerię obrazków i chcę dodać do każdego elementu rozwijane menu (które ma działać podobnie jak rozwijanie albumów w iTunes 11 - http://youtu.be/AMlLwWySGKc?t=57s).

Problem w tym iż układ obrazków oparłem o listy <ul> i elementy <li> aby były sąsiadujące obok siebie muszą być wypozycjonowane "pływająco" - float: left.

Teraz w jQuery napisałem funkcję, która po kliknięciu w dany element dodaje mu dynamicznie nowego diva o klasie container, natomiast później wczytuje do tego diva kolejnego o klasie menu (który dodatkowo ma ustawioną pozycję na absolute, by zajmować całą szerokość okna), w którym jest już cały kod mojego menu.

Chciałbym by pojawieniu się tego menu towarzyszyła animacja, więc wysokość diva ustawiam na 0, a później za pomocą animate() ustawiam dana wysokość do żądanej wielkości.

I teraz zaczynają się schody - po kliknięciu w element animacja w ogóle się nie wykonuje, tylko po chwili element po prostu się pojawia, a dodatkowo jeżeli ustawię wysokość elementu głównego <li> jako wysokość li + wysokość menu, to wtedy cały układ tych elementów sie rozsypuje.

Działanie i kod:
http://jsfiddle.net/puz219/VmrEG/

Jak naprawić animację - to znaczy by była ona widoczna i zachować przy tym układ elementów