Submenus slide up too much as the window scroll down - css

Question

I have a website which was built with Joomla. The website has a main menu with submenus. As the window is scrolled down a little bit, the submenus slide upwards more than expected as shown in the following picture (the wrong appearance).
the menu when the window is not scrolled down looks like the following (the correct appearance):
What could be the problem? where should I modify the configuration or the code?
here is some part of the css/s5_flex_menu.css. I hope it will help:
/* all menu links */
#s5_nav a, #subMenusContainer a{
text-decoration:none;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#s5_nav a{
margin:0;
}
#subMenusContainer ul li {
padding:0px;
margin:0px;
}
/* Just sub menu links */
#subMenusContainer a, #s5_nav li li a{
text-align:left;
font-size:0.9em;
width:auto;
text-transform:uppercase;
color:#ffffff;
white-space: pre;
}
#subMenusContainer a:after, #s5_nav li li a:after {
content:"\a";
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* All ULs and OLs */
#nav, #s5_nav ul, #s5_nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
#s5_nav ol, #s5_nav ul, #subMenusContainer ul, #subMenusContainer ol {
left:0;
}
#subMenusContainer img {
margin-right:8px;
}