Extra space between parent and child Menu entries - superfish

Extra space between parent and child Menu entries - superfish

When I hover over a parent navigation item with children, the dropdown appears but there is blank space between the parent and its children so the two are not "connected". Thus, I cannot smoothly scroll to the children, hover, or click on them. I have tried the z-index fix with no results. Please help. I am a newbie at this and no amount of searching and trying has found a solution.
Thank you,
Deanne
CSS follows:
 
#nav1 {
 font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 padding:0;
 margin:0 5px 10px 5px;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: solid;
 border-bottom-style: solid;
 border-top-color: #3a3a3a;
 border-bottom-color: #3a3a3a;
}









#nav1 ul {
 width:740px;
 float:left;
 padding:0;
}
/*Main Nav Bar Spacing*/
#nav1 ul.sf-menu li {
position:relative;
z-index:2;
float:left;
line-height:40px;
padding:4px 5px;
text-align:middle;
}
/*Main Nav Bar Text Formatting*/
#nav1 ul.sf-menu li a {
color:#3a3a3a;
margin:0;
padding:1px 10px;
}


















#nav1 ul.sf-menu li a:current_page_item { padding:0 9px; color:#686868; background:#686868; border:1px solid #686868; }
/*Main Nav Bar Hover Formatting*/
#nav1 ul.sf-menu li a:hover, #nav1 ul.sf-menu li a:active {
 padding:0 9px;
 color:#333333;
 background:#c0d3e1;
 }




/*Child 1st level Text and Background Formatting*/
#nav1 ul.sf-menu li ul.children {
 margin:0;
 background:#ececec;
 width:210px;
 padding:0;
 border:1px solid #dadada;
 }
/*Child 1st level Text Formatting*/
#nav1 ul.sf-menu li ul.children a {
 margin: 0px 0px 0px 10px;
  padding:0;
  color:#2f6d9b;
  width:210px;
  }
#nav1 ul.sf-menu li ul.children a:hover #nav1 ul.sf-menu li ul.children a:active {
 color:#fff;
 background:#c0d3e1;
 width:200px;
 text-decoration:none;
 vertical-top: 30px;
 }
#nav1 ul.sf-menu li ul.children li {
border:0;
padding:0;
z-index:1;