.dropdownと.dropdown-menuの間のギャップを取り除く方法

Question

モバイルビューで.dropdownメニューをクリックすると、.dropdownと.dropdown-menuの間に小さなスペースがあります。ここに示した

として

質問は、その小さなスペース/ギャップを除去することが可能ですか？

Codepen例code-viewとfull-view

CSS

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

body { 
    color: #fff; 
    background: #222; 
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    margin: 0; 
    color: #000000; 
} 

.row { 
    margin-bottom: 20px; 
} 

.row:last-of-type { 
    margin-bottom: 0; 
} 

.bg { 
    background-color: #eeeeee; 
    padding: 40px 40px 40px 40px; 
} 

#custom-bootstrap-menu { 
    margin-top: 40px; 
    margin-bottom: 0; 
    border-color: 0; 
} 

#custom-bootstrap-menu .navbar-brand { 
    color: rgba(255, 255, 255, 1); 
} 

#custom-bootstrap-menu { 
    font-size: 14px; 
    background-color: rgba(51, 51, 51, 1); 
    border-width: 0px; 
    border-radius: 0px; 
} 

#custom-bootstrap-menu .navbar-nav > li > a { 
    color: #ffffff; 
} 

@media (min-width: 768px) { 
    #custom-bootstrap-menu .navbar-nav > li > a.link1 { 
     border-top: 3px solid #e18728; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link1:hover, 
    #custom-bootstrap-menu .navbar-nav > li > a.link1:focus { 
     color: #ffffff; 
     background-color: #e18728; 
    } 

    #custom-bootstrap-menu .navbar-nav > li.active > a.link1 { 
     color: #ffffff; 
     background-color: #e18728; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link2 { 
     border-top: 3px solid #BE4C39; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link2:hover, 
    #custom-bootstrap-menu .navbar-nav > li > a.link2:focus { 
     color: #ffffff; 
     background-color: #BE4C39; 
    } 

    #custom-bootstrap-menu .navbar-nav > li.active > a.link2 { 
     color: #ffffff; 
     background-color: #BE4C39; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link3 { 
     border-top: 3px solid #9351A6; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link3:hover, 
    #custom-bootstrap-menu .navbar-nav > li > a.link3:focus { 
     color: #ffffff; 
     background-color: #9351A6; 
    } 

    #custom-bootstrap-menu .navbar-nav > li.active > a.link3 { 
     color: #ffffff; 
     background-color: #9351A6; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link4 { 
     border-top: 3px solid #4472B9; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link4:hover, 
    #custom-bootstrap-menu .navbar-nav > li > a.link4:focus { 
     color: #ffffff; 
     background-color: #4472B9; 
    } 

    #custom-bootstrap-menu .navbar-nav > li.active > a.link4 { 
     color: #ffffff; 
     background-color: #4472B9; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link5 { 
     border-top: 3px solid #4CA454; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link5:hover, 
    #custom-bootstrap-menu .navbar-nav > li > a.link5:focus { 
     color: #ffffff; 
     background-color: #4CA454; 
    } 

    #custom-bootstrap-menu .navbar-nav > li.active > a.link5 { 
     color: #ffffff; 
     background-color: #4CA454; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link6 { 
     border-top: 3px solid #d49b00; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link6:hover, 
    #custom-bootstrap-menu .navbar-nav > li > a.link6:focus { 
     color: #ffffff; 
     background-color: #d49b00; 
    } 

    #custom-bootstrap-menu .navbar-nav > li.active > a.link6 { 
     color: #ffffff; 
     background-color: #d49b00; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link7 { 
     border-top: 3px solid #444444; 
    } 

    #custom-bootstrap-menu .navbar-nav > li > a.link7:hover, 
    #custom-bootstrap-menu .navbar-nav > li > a.link7:focus { 
     color: #ffffff; 
     background-color: #444444; 
    } 

    #custom-bootstrap-menu .navbar-nav > li.active > a.link7 { 
     color: #ffffff; 
     background-color: #444444; 
    } 
} 

#custom-bootstrap-menu .navbar-nav > li > a:hover, 
#custom-bootstrap-menu .navbar-nav> li > a:focus { 
    color: #5a5a5a; 
    transition: color 0.25s; 
} 

#custom-bootstrap-menu .navbar-nav>.active > a, 
#custom-bootstrap-menu .navbar-nav>.active > a:hover, 
#custom-bootstrap-menu .navbar-nav>.active > a:focus { 
    color: rgba(85, 85, 85, 1); 
    background-color: rgba(231, 231, 231, 1); 
} 

#custom-bootstrap-menu .navbar-toggle { 
    border-color: #ddd; 
} 

#custom-bootstrap-menu .navbar-toggle:hover, 
#custom-bootstrap-menu .navbar-toggle:focus { 
    background-color: #ddd; 
} 

#custom-bootstrap-menu .navbar-toggle { 
    border: none; 
    background-color: none; 
    font-size: 2.5rem; 
    cursor: pointer; 
} 

#custom-bootstrap-menu .navbar-toggle:hover, 
#custom-bootstrap-menu .navbar-toggle:focus { 
    background: none; 
} 

#custom-bootstrap-menu .navbar-nav > .open > a, 
#custom-bootstrap-menu .navbar-nav > .open > a:hover, 
#custom-bootstrap-menu .navbar-nav > .open > a:focus { 
    color: #555; 
    background-color: #262626; 
} 

@media (max-width: 767px) { 
    #custom-bootstrap-menu .navbar-nav > li > a:hover, 
    #custom-bootstrap-menu .navbar-nav > li > a:focus { 
     background-color: #404040; 
     color: #ffffff; 
    } 

    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > li > a { 
     margin-top: 0; 
     background-color: #404040; 
     color: #777; 
    } 

    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > li > a:hover, 
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > li > a:focus { 
     color: #ffffff; 
     background-color: transparent; 
    } 

    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .active > a, 
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .active > a:hover, 
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .active > a:focus { 
     color: #555; 
     background-color: #404040; 
    } 

    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .disabled > a, 
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .disabled > a:hover, 
    #custom-bootstrap-menu .navbar-nav .open .dropdown-menu > .disabled > a:focus { 
     color: #ccc; 
     background-color: transparent; 
    } 
} 

.btn { 
    border: 0; 
} 

.btn-default { 
    border-radius: 0; 
    color: #ffffff; 
    background-color: #333333; 
} 

.btn-default:hover { 
    background-color: #4d4d4d; 
    color: #ffffff; 
} 

.btn-primary { 
    border-radius: 0; 
    color: #ffffff; 
    background-color: #1199aa; 
} 

.btn-primary:hover { 
    background-color: #13aec1; 
    color: #ffffff; 
} 

.btn-success { 
    border-radius: 0; 
    color: #ffffff; 
    background-color: #77cc22; 
} 

.btn-success:hover { 
    background-color: #84dc2c; 
    color: #ffffff; 
} 

.btn-info { 
    border-radius: 0; 
    color: #ffffff; 
    background-color: #8899ee; 
} 

.btn-info:hover { 
    background-color: #9eacf1; 
    color: #ffffff; 
} 

.btn-warning { 
    border-radius: 0; 
    color: #ffffff; 
    background-color: #ee8822; 
} 

.btn-warning:hover { 
    background-color: #f0953a; 
    color: #ffffff; 
} 

.btn-danger { 
    border-radius: 0; 
    color: #ffffff; 
    background-color: #dd5544; 
} 

.btn-danger:hover { 
    background-color: #e1695a; 
    color: #ffffff; 
} 

.panel { 
    border: none; 
    border-radius: 0; 
} 

.panel-body { 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
} 

.panel-default > .panel-heading { 
    border-radius: 0; 
    background-color: #333; 
    color: #ffffff; 
} 

.panel-primary > .panel-heading { 
    border-radius: 0; 
    background-color: #19a; 
    color: #ffffff; 
} 

.panel-success > .panel-heading { 
    border-radius: 0; 
    background-color: #7c2; 
    color: #ffffff; 
} 

.panel-info > .panel-heading { 
    border-radius: 0; 
    background-color: #89e; 
    color: #ffffff; 
} 

.panel-warning > .panel-heading { 
    border-radius: 0; 
    background-color: #e82; 
    color: #ffffff; 
} 

.panel-danger > .panel-heading { 
    border-radius: 0; 
    background-color: #d54; 
    color: #ffffff; 
} 

.alert { 
    border: 0; 
} 

.alert-success { 
    color: #ffffff; 
    background-color: #7c2; 
} 

.alert-info { 
    color: #ffffff; 
    background-color: #89e; 
} 

.alert-warning { 
    color: #ffffff; 
    background-color: #e82; 
} 

.alert-danger { 
    color: #ffffff; 
    background-color: #d54; 
} 

Answer 1

追加してください：

@media (max-width: 767px) { 
    .navbar-nav .open .dropdown-menu { 
    padding-top: 0; 
    } 
} 

あなたもpadding-bottom: 0;を追加することができます。