주메뉴 오버스 위에 이미지처럼 서브 메뉴가 나오게 했는데

주메뉴하고 서브메뉴 사이에 공간이 있어서 서브 메뉴에 마우스 오버시 깜빡 거리는 현상이 발생하고 있습니다.

이것을 해결할려면 어찌 해야 할까요?

주메뉴에 서브 메뉴 사이에

.mt-20 {margin-top: 20px !important}
이 소스를 적용했습니다.

                            <li class="active"><a href="intro1.php">교회소개</a>
                                <ul class="dropdown-menu mt-20">
                                    <li><a href="intro1.php">교회소개</a></li>
                                    <li><a href="intro2.php">담임목사 인사말</a></li>
                                    <li><a href="intro3.php">예배안내</a></li>
                                    <li><a href="intro4.php">오시는 길</a></li>
                                </ul>
                            </li>

css가

/* 상단 메뉴 */
.navbar-default .navbar-nav > li{
}
.navbar-default .navbar-nav > li:first-child{
    border-left:none;
}
.navbar-default .navbar-nav > li > a{
    padding: 10px 10px;
    color: hsl(0, 0%, 48%);
    color:#555;
    text-transform:uppercase;
    font-size: 17px;
    font-weight: 600;
    line-height:15px;

}
.navbar-default .navbar-nav > li > a:hover:after {
    opacity: 1;
    visibility: visible;
    height: 100%;
}

/* 서브메뉴 높이 */
.navbar-nav .dropdown-menu > li > a {
    white-space:normal;
    font-size: 13px;
    font-weight: bold;
    padding:9px 10px;
    border-bottom:1px solid #DCDCDC;
}
/* 서브메뉴 오버 색상 */
.navbar-nav .dropdown-menu > li > a:hover
{
    color:#E74C3C;
    background: none repeat scroll 0 0 #;
}
.navbar-nav ul.sm-nowrap > li > a {
    white-space:nowrap;
}