Issue in IE7 probably z-index bug

Question

I have added a drop down menu on link Recipes in the main navigation.

Test URL: http://jaspreetkaur.com/makebathsalts/

It's working fine in all browsers except IE7 (not tested in IE6)

Menu is going behind banner area in IE7, i think it's related to z-index bug of IE7. I found some details on following page, but not able to fix this. IE7 Z-Index Layering Issues

Answer 1

You need this:

#navigation{position:relative;z-index:10;}

Answer 2

The fix is simple, you need to specify the z-index for the direct parent of the ul menu, in your case the li with class active like this:

 li.active {
     position:relative;
     z-index:10;
 }