Design issue in CSS

Question

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?

Answer 1

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;
}

Answer 2

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

like this:

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