删除CSS水平导航栏中活动li元素的下边框

Question

我有一个横向导航，如下所示：

我正在尝试删除主动选择的li项目的底部边框，但出于某种原因，通常的方法似乎不起作用。我已尝试应用margin-bottom: -1px;但它无效。

这是一个带有我的CSS代码的JSFiddle： http://jsfiddle.net/s5ynF/8/

感谢您的任何帮助。

Answer 1

简单。

将这些CSS选择器更新为：

ul.nav {
    list-style: none;
    margin: 0;
    padding: 0; 
    padding-left: 25px;
    border-bottom: 1px solid #E8E8E8;
    height:25px;
}

#nav .home {
    background-color: #FFF;
    border: 1px solid #E8E8E8;
    border-bottom: 1px solid #FFF;
    margin-bottom: -1px;   
}

我删除了overflow:hidden;，这就是它无效的原因。然后我将一个固定的高度应用于.nav

Answer 2

您需要使用不同的明确修复方法，因为overflow: hidden正在阻止它工作。

我添加了一个显式高度并删除overflow: hidden并且它有效。