CSS Flyouts


I am working on a site for my kids school. I have the flyouts working in IE, but they dont work in firefox. The site is uhillspta.org

The bottom row of “buttons” should all have flyouts. They dont work in FF. I appreciate any suggestions or tips.

Thank You


I did this with Firebug on FF 3.6.8, the CSS I ended up with (added to the bottom of your main CSS) was this:

.nav li.button:hover div.dropdown {
  left: -30px;
  right: auto;

Because I just did this in Firebug I can’t promise it will work everywhere with all your other css.
This is just a fix on top of what is really pretty shaky CSS to begin with. I would recommend looking at this tutorial:

Your HTML structure for the menu is already very close to that in the tutorial, but the CSS is full of hacks. If you were to use this tutorial, the menu you would create as a result would work in all browsers without javascript except for IE6, and work in IE6 with a small amount of javascript.

I hope this helps!