Rahul,
Nice looking website! Great colors!
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.
http://www.zenelements.com/blog/css3-transform/
.
