Extra space between Menu parent and child entries

[dtbdtb]

Hello,
I downloaded a template to use for our company website. All was fine until I went to add children to the horizontal navigation menu. Here's what the template uses:

<link rel="stylesheet" type="text/css" href="superfish.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/hoverintent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-- Start Of Script Generated By WP-PageNavi 2.40 -->
<link rel="stylesheet" href="pagenavi-css.css" type="text/css" media="screen" />

The original template works fine. However, after I changed the menu items 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 looked all over for the source of the space but I'm at a loss as to what's causing it.

The html is:

<div id="nav1">
<ul class="sf-menu sf-js-enabled">
<li class="cat-item cat-item-1"><a href="index.html" class="nav1backedge" title="Home">Home</a></li>
<li class="cat-item cat-item-6"><a href="execution.html" class="nav1backedge" title="Our Approach">Our Approach</a>
<ul class="children">
<li class="cat-item cat-item-12"><a href="#" class="nav1backedge" title="Our Beliefs" style= "font-weight:bold";"margin:5px 0px 5px 10px";>Our Beliefs</a></li>
<li class="cat-item cat-item-13"><a href="execution.html"class="nav1backedge" title="Strategy, Design, and Execution" style="margin:0px 0px 2px 20px";"font-weight:normal";>Strategy, Design, and Execution</a></li>
<li class="cat-item cat-item-11"><a href="simplebetter.html" class="nav1backedge" title="The Simpler, the Better" style="margin:0px 0px 2px 20px"; "font-weight:normal";>The Simpler, the Better</a></li>
<li class="cat-item cat-item-10"><a href="devildetails.html" class="nav1backedge" title="The Devil is in the Details" style="margin:0px 0px 0px 20px";"font-weight:normal";"border-bottom:1px solid #dadada";>The Devil is in the Details</a></li>
<li class="cat-item cat-item-14"><a href="ba.html" class="nav1backedge" title="The Business Architect" style="margin:5px 0px 5px 10px">The Business Architect</a></li>
<li class="cat-item cat-item-15"><a href="processes.html" class="nav1backedge" title="Your Processes" style="font-weight:bold";"margin:0px 0px 5px 10px";>Your Processes</a></li>
<li class="cat-item cat-item-16"><a href="guidingprinciples.html" class="nav1backedge" title="Guiding Principles" style="margin:0px 0px 2px 20px";"font-weight:normal";>Guiding Principles</a></li>
<li class="cat-item cat-item-17"><a href="buildingblocksintro.html" class="nav1backedge" title="Building Blocks" style="margin:0px 0px 2px 20px";"font-weight:normal";>Building Blocks</a></li>
</ul>
</li>
<li class="cat-item cat-item-3"><a href="gettingstarted.html" title="Getting Started">Getting Started</a></li>
<li class="cat-item cat-item-4"><a href="services.html" title="Services">Services</a></li>
<li class="cat-item cat-item-5"><a href="mission.html" title="Mission"> Mission</a></li>
<li class="cat-item cat-item-2"><a href="aboutus.html" title="About Us">About Us</a></li>
<li class="cat-item cat-item-7"><a href="contactus.html" title="Contact Us">Contact Us</a></li>
</ul>
<div class="clr"></div>
</div>

The style sheet is:
#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;
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;
}
#nav1 ul.sf-menu li ul.children li {
border:0;
padding:0;
}
.nav1backedge {
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px";
}

I have gone over this again and again with no luck. I would greatly appreciate your help and feedback as to how to identify or fix the issue.
Thanks very much,

[NickJohnson]

U must talk to HTML experts on this... You will get the exact solution....