CSS删除选项卡式导航菜单上的边框

我试图在CSS中创建一个简单的选项卡式导航菜单。我很难让活动选项卡上的底部边框消失。通常情况下，这并不难做到，但我还希望设置一个线条高度。。因此，我将内联块与各种IE和FF修复一起使用。这使它以我想要的方式显示，但底部边框除外

我已经尝试了很多方法来实现这一点，包括设置一些操作员。。但我对CSS了解不够，无法确定我是否正确使用了它们

这是我的名片

（显然，我的CSS技能需要改进，我可能也可以大大简化代码。）

代码：

HTML:

对于#tab_菜单，我删除了溢出：隐藏

#tab_menu {   
    /*overflow: hidden;*/
}

在.tab_菜单_active中，我添加了此样式，它将添加边框底部白色，并通过位置操纵将覆盖灰色边框颜色

.tab_menu_active {   
    border-bottom:solid 1px #fff;
    position:relative; 
    top:1px;
}
.tab_menu_active a {   
    position:relative;
    top:-1px;
}

对于#tab_菜单，我删除了溢出：隐藏

#tab_menu {   
    /*overflow: hidden;*/
}

在.tab_菜单_active中，我添加了此样式，它将添加边框底部白色，并通过位置操纵将覆盖灰色边框颜色

.tab_menu_active {   
    border-bottom:solid 1px #fff;
    position:relative; 
    top:1px;
}
.tab_menu_active a {   
    position:relative;
    top:-1px;
}

---

您遇到的问题是整个

#选项卡(tab)菜单

都有底部边框。有几种方法可以解决这个问题，但首先我将向您介绍如何简化css的一些细节

给

li

类

选项卡

，这意味着您拥有的每个选项卡都将获得相同的css。在活动的一个上，给它第二个类，

active

。在css定义中，定义所有的

tab

都应该具有相同的css（而不是在

tab\u menu\u active

和

tab\u menu\u not\u active

中具有重复的css）

我建议在底部给它们一个边框，然后在活动边框中删除该边框

---

这里有一个分叉。

您的问题是整个

#选项卡(tab)菜单

有一个底部边框。有几种方法可以解决这个问题，但首先我将向您介绍如何简化css的一些细节

给

li

类

选项卡

，这意味着您拥有的每个选项卡都将获得相同的css。在活动的一个上，给它第二个类，

active

。在css定义中，定义所有的

tab

都应该具有相同的css（而不是在

tab\u menu\u active

和

tab\u menu\u not\u active

中具有重复的css）

我建议在底部给它们一个边框，然后在活动边框中删除该边框

---

这是一个叉子。

嗯。那就行了！我试图得到一个类似的结果与负利润。我没想过要设置这样的亲戚。（隐藏的溢出是我尝试的另一件事情的一部分，但没有成功，所以也感谢您删除它）。非常感谢！您只需将相对位置+负边距相加即可。那就行了！我试图得到一个类似的结果与负利润。我没想过要设置这样的亲戚。（隐藏的溢出是我尝试的另一件事情的一部分，但没有成功，所以也感谢您删除它）。非常感谢！您只需将相对位置+负边距相加即可。我将至少进行这些更改以减少重复代码。您的示例的其余部分与我需要的不完全一样。有一些代码是旧浏览器不支持的，并且底部边缘不再扩展屏幕的宽度。没有意识到你需要整个底边。只是不需要任何旧的浏览器支持。你确实有一个有效的答案，所以我不会费心更新我的答案。会和下一个做同样的事谢谢我将至少进行这些更改以减少重复代码。您的示例的其余部分与我需要的不完全一样。有一些代码是旧浏览器不支持的，并且底部边缘不再扩展屏幕的宽度。没有意识到你需要整个底边。只是不需要任何旧的浏览器支持。你确实有一个有效的答案，所以我不会费心更新我的答案。会和下一个做同样的事