Mootools Fx.Slide & CSS styles?

Question

I am playing around with Mootools' Fx.Slide effects for some drop down menus. I've used them before with no issues, but for some reason now it seems as soon as I set up a new Fx.Slide on an element, it messes up my CSS styles. Here's an uploaded example...

Before applying Fx.Slide

After applying Fx.Slide

You can see the difference in my drop down menu styles. All my styles are applied first via this style sheet, and the line that seems to mess it up my styles is line #19 in this menu.js script (here is a paste of the same thing, with line numbers.).

The difference between the two examples above is only line #19 in menu.js, which you can see I've commented out in the first example... subNav[index] = new Fx.Slide(subNav[index], {duration: 200});

Again, the weird thing is that I have used Fx.Slide on other websites (like the drop down menus on this site), and it never seemed to mess up any of my styles. Any advice?

Answer 1

It's because of how your styles are set up.

Fx.Slide adds a div around your ul. Therefore, your ul stops receiving its styles from #header #nav > ul > li > ul because it's no longer a direct descendant of #header #nav > ul > li.