无法删除上边距

Question

我有菜单：

<div class="col-sm-3 col-md-2 sidebar" style="background-color:white">
    <ul class="sideMenu nav nav-sidebar">
        <li class="dontHide"><a href="">Producers</a></li>
        <li><a href="/Manufacturer">Producers</a></li>
    </ul>
    <ul class="sideMenu nav nav-sidebar">
                <li class="dontHide"><a href="">Device library</a></li>
                <li><a href="/Device">Device list</a></li>
    </ul>
    <ul class="sideMenu nav nav-sidebar">
        <li class="dontHide"><a href="">Device Instances</a></li>
        <li><a href="/DeviceInstance">Device instances</a></li>
        <li><a href="/DeviceInstance/Summary">Instances summary</a></li>
    </ul>

</div>

此菜单如下所示：

正如您在hover事件中看到的那样，背景颜色正在改变，之前元素的UL和border-bottom之间有一些余量。我试过css：

.sidebar > ul{
    border-bottom: 1px solid #eee;
}
.sidebar > ul:hover{
    background-color:#f4f4f4;
}
.sidebar > ul> li > a{
    margin-top:0px
}

或 保证金底部：

.sidebar > ul> li > a{
    margin-bottom:0px
}

当您能够看到我想要移除的边距时，您可以查看此JSfiddle CLICK。

Answer 1

从margin-bottom

中删除.nav-sidebar

Answer 2

.nav-sidebar{margin-bottom:0;}

Answer 3

.nav-sidebar{ margin-bottom:0 }代替margin-bottom:-20px;

Answer 4

你应该改变2个地方：

.nav-sidebar{margin-bottom:0;}

和

@media (min-width: 768px) {
.sidebar { 

padding: 0 20px;

}
}

所以代码是：

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: block;

    padding: 0 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
  }
}

/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 0;
  margin-left: -20px;
}