interaction prob. b/w div items using css

Hi there,
I am building a site using CSS :

http://www.kohlrdesigns.com/inform/

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.

The black background is created using the following code:

DIV.black{
position:relative;
top: -228;
height:100%;
left:148;
width:100%;
background-color: #000000;

}

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!

Thanks so much!!!
Jill

This is probably something for the Javascript or CSS forum. Try there.