Animowane menu w mootools 1.2

[larry_krk]

Witam serdecznie. Zrobiłem sobie w menu animowane tło i wszystko było supper do momentu, gdy okazało się, że potrzebuję w tym miejscu również rozwijanego podmenu. Jedno z drugim mi niestety nie rabotajet. Próbowałem tak:

<div class="moduletable">
<ul class="menu" id="****">
<li class="active current"><a style="background-position: 0px -46px;" href="#"><span>Start</span></a>
</li><li class="parent"><a style="background-position: 0px -46px;" href="#"><span>Zakres Uslug</span></a>
<ul>
<li><a style="background-position: 0px -46px;" href="#"><span>Oferta</span></a>
</li><li><a style="background-position: 0px -46px;" href="#"><span>Szukajka</span></a>
</li>
</ul>
</li>
<li><a style="background-position: 0px -46px;" href="#"><span>Galeria Zdjec</span></a></li><li><a style="background-position: 0pt -46px;" href="/pl/blog.html"><span>Blog</span></a></li>
<li><a style="background-position: 0pt -46px;" href="#"><span>Kontakt</span></a></li>
<li><a style="background-position: 0pt -46px;" href="#"><span>Mapa Strony</span></a></li>
<li><a style="background-position: 0pt -46px;" href="#"><span>LOGOWANIE</span></a></li></ul>
</div>JS:

window.addEvent('domready', function() {

/* Animacja TŁA */
$$('.menu li a').each(function(el) {
var fx = new Fx.Tween(el,{
duration: 300,
link: 'cancel'
});
el.setStyle('background-position','0 -46px').addEvents({
'mouseover': function(e) {
e.stop();
fx.start('background-position','0 0px');
},
'mouseleave': function(e) {
e.stop();
fx.start('background-position','0 -46x');
}
});
});

/* ROZWIJANE MENU*/
$('****').getElements('li.parent').each( function( elem ){
var list = elem.getElement('ul');
var myFx = new Fx.Slide(list).hide();
elem.addEvents({
'mouseover' : function(){
myFx.cancel();
myFx.slideIn();
},
'mouseleave' : function(){
myFx.cancel();
myFx.slideOut();
}
});
})
/* PRZEWIJANIE STRONY*/
new SmoothScroll({ duration:700 }, window);

});Animka i rozwijanie działają, ale tylko oddzielnie.
Jakieś sugestie??
----------------------
**** to wykropkowane czteroliterowe id menu określające tylną część ciała.

[larry_krk]

Dla menu takiego jak w pierwszym poście rozwiazaniem może być:
JS:

window.addEvent('domready', function() {

var mainlist = $('****'),
items = mainlist.getChildren('li'),
links = $$(items.getChildren('a')),
subs = $$(items.getElements('ul'));

links.set('tween', {
'duration': 300,
'link': 'cancel'
}).setStyle('background-position', '0 -46px');

subs.set('tween', {
'duration': 300,
'link': 'cancel'
}).fade('hide');

items.addEvents({
'mouseenter': function() {
var linkEl = this.getElement('a'),
subEl = this.getElement('ul');

linkEl.tween('background-position', '0 0px');

if (subEl) {
subEl.fade('in');
}
},

'mouseleave': function() {
var linkEl = this.getElement('a'),
subEl = this.getElement('ul');

linkEl.tween('background-position', '0 -46px');

if (subEl) {
subEl.fade('out');
}
}
});
});

Pzdr