CSS hover menu positioning troubles

I'm building a CSS hover menu for my site: http://test.fairfood.org.

I can't seem to figure out how to position each nested ul to display underneath it's parent li. They all show up at the same place. The submenus also d开发者_开发百科isappear behind the carrousel even though the nested ul's have position absolute and a high z-index.

What am I overlooking here?

I suggest stripping all your style from the ul li elements and just call them like this:

http://jsfiddle.net/MmsVS/

This is the style I use for my own menus.