Help with CSS drop down menu bar (large gap between menu & submenu when scrolled down

First a picture of the page when you have not scrolled down... works fine..

http://img352.imageshack.us/my.php?image=pic1sp1.jpg


A picture after you have scrolled down, and then go over the menu bar...

http://img411.imageshack.us/my.php?image=pic2tg3.jpg

I just want to have this submenu attached to the main menu bar (as one would assume most pages would). I have been trying to screw around with the css code (i'm new obviously) for a long long time, and it is very frustrating. here is the css code also.

In advance, THANK YOU, for any help... i'm under the gun here...

ul.MenuBarHorizontal { margin : 0;
padding : 0;
list-style-type : none;
font-size : 100%;
cursor : default;
width : auto;
padding-left : 0;
padding-right : 0;
position : relative;
background-image : url(url);

}
ul.MenuBarActive { z-index : 1000;

}
ul.MenuBarHorizontal li { margin : 0;
padding : 0;
list-style-type : none;
font-size : 16px;
position : relative;
text-align : center;
cursor : pointer;
float : left;
background-image : url(url);
padding-left : 0;
padding-right : 0;

}
ul.MenuBarHorizontal ul { margin : 0;
padding : 0;
list-style-type : none;
font-size : 100%;
z-index : 1020;
cursor : default;
width : 8em;
position : fixed;
left : -1000em;
background-image : url();

}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left : auto;

}
ul.MenuBarHorizontal ul li { width : 9.2em;

}
ul.MenuBarHorizontal ul ul { position : absolute;
margin : -5% 0 0 95%;

}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left : auto;
top : 0;

}
ul.MenuBarHorizontal ul { border : 0 solid #000000;

}
ul.MenuBarHorizontal a { display : block;
cursor : pointer;
color : #2c2a2b;
text-decoration : none;
padding-left : 24px;
padding-right : 24px;
padding-top : 0.5em;
padding-bottom : 0.5em;
background-repeat : repeat;
background-image : url(../abackground.jpg);

}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color : #fff;
display : block;

}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { color : #fff;
display : block;

}
ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image : url(../abackground.jpg);
background-repeat : repeat;

}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image : url(../background.jpg);
background-repeat : repeat-x;

}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image : url();
background-repeat : no-repeat;
background-position : 95% 50%;

}
ul.MenuBarHorizontal iframe { position : absolute;
z-index : 1010;

}

@media projection, screen { ul.MenuBarHorizontal li.MenuBarItemIE { display : block;
float : left;
background : #fff;

}

}

 

It is pretty much impolite to x-post the same issue to multiple forums. You're causing disparate groups to duplicate the others work. That you're in a hurry does not excuse boorish behavior.

Worse, it is obvious that you did not show any of us the courtesy of following forum posting guidelines. Please post code within the bbcode code containers. Further, you did not post all the required code. CSS works against the DOM, which is a product of the html markup. Without the html, the css is pretty much gibberish. Even though we might guess at what you've done, it's still a guess.

gary