Javascript 子菜单未按需要定位

我想让我的下拉菜单如下图所示。问题是，当我将鼠标悬停在主菜单的第二项上时，子菜单会从顶部留下一个边距，如图片左侧所示。我不想要那个空地方。我想子菜单总是显示在相同的大小和位置上的所有主菜单选项，其中有一个子菜单

。下拉子菜单{
位置：相对位置；
}
.下拉子菜单>.下拉菜单{
排名：0；
左：100%；
利润上限：-6px；
左边距：0px；
-webkit边界半径：0 6px 6px 6px；
-moz边界半径：0 6px 6px 6px；
边界半径：0 6px 6px 6px；
}
.下拉子菜单>a:之后{
内容：“；
显示：块；
浮动：对；
身高：0；
右边距：-1px；
边缘顶部：5px；
宽度：190px；
左侧填充：10px；
}
#abg>li>a:悬停，#abg>.active>a:悬停{
文字装饰：无；
背景色：#49b3e7；
填充顶部：15px；
垫底：20px；
}  
@介质（最大宽度：767px）{
.导航栏导航{
显示：内联；
}
.navbar默认值.navbar品牌{
显示：内联；
}
.navbar默认值.navbar切换.图标栏{
背景色：#fff；
}
.navbar默认值.navbar导航下拉菜单>li>a{
颜色：红色；
背景色：#ccc；
边界半径：4px；
边缘顶部：2倍；
}
.navbar默认值.navbar导航打开.下拉菜单>li>a{
颜色：#333；
}
.navbar默认值.navbar导航打开.下拉菜单>li>a:悬停，
.navbar默认值.navbar导航打开.下拉菜单>li>a:焦点{
背景色：#ccc；
}
.导航栏导航.打开.下拉菜单{
边框底部：1px纯白；
边界半径：0；
}
.下拉菜单{
左侧填充：10px；
}
.下拉菜单.下拉菜单{
左侧填充：20px；
}
.下拉菜单.下拉菜单.下拉菜单{
左侧填充：30px；
}
李，下拉，打开{
边框：0px实心红色；
}
}
@介质（最小宽度：768px）{
ul.nav li：悬停>ul.下拉菜单{
显示：块；
}
#导航栏{
文本对齐：居中；
}
}

切换导航






















































.dropdown-submenu {
  position: static;
}

.dropdown-submenu {
   position: static;
   top: 0;
   left: 100%;
}