Design issue in CSS

I am trying to display multiple li's under a ul. But by using the 开发者_开发知识库below code I am getting gap above the first li.

Screen shot: The gap I mentioned is shown in red colour. I want to remove it. Can anybody solve it?

Since the red background is showing, it's a padding on the submenu list.

Try adding:

#nav li.off ul li:hover ul,
#nav li.on ul li:hover ul {
  padding-top: 0;
}

remove the padding-top and/or the margin-top of the <ul>

like this:

ul {
   padding-top: 0;
   margin-top: 0;
}