The hover images are taking forever to load. Once loaded the black box goes away and everything looks great.
-Reduce the image sizes
-combine them into a sprite.
-load them earlier in the css file
You can see them loading last and taking forever in Firebug.
Steve’s advice is right-on…the image file sizes are too large, and using a multi-state sprite for each navigation item would eliminate the black box effect. Also, consider optimizing the images to GIF or PNG 8 (these formats are best suited to flat solid color graphics and can reduce the file sizes considerably). If yours are PNG 24 with alpha-transparency they are surely too large. Check this out > http://www.underwaterphotography.com/PhotoShop/PhotoShop/help.html
There are 2 other options and additional things you can do:
1. Reduce the images’ vertical dimensions and use absolute positioning rather than keeping within the very high vertical area for the diagonal text. Keep the background as a full width image in the containing div and only swap out the area just around the text since that is what you are already doing.
2. Use a CSS3 transform to skew the the markup’s anchor link text for the diagonal effect without using any images.