interaction prob. b/w div items using css

I am getting a bad interaction between two div items and I don't know how to fix it. When the site is first viewed it is fine. However, once the submenu is opened under products, the entire black background moves down with it. I have tried setting the background to absolute, but then I was getting a scroll bar at the bottom. So it is currently set to relative. However I can see that it is interacting with the nav bar in some way. I have tried moving the <div class="black></div> to different areas in the html but this only seems to mess up things. So I'm at a dead end in trying to figure out how to fix it even though I can see the problem.

I'm hoping somebody might be able to tell me how I can stop this interaction. I hope I have included enough info. I even read the "how to post for newbies" section please let me know if there is more info needed to give me some suggestions!