Html 每件物品的边框都是完整的，但颜色不同

我正在尝试这样的布局，带有全宽灰色边框，但活动项下面的边框颜色不同：

但它不起作用。你知道为什么吗

---

不是同一个元素，你需要为他将边框样式也带到底部。

试试这个。希望它能起作用

编辑：我在

.nav

中使用了5px底色。因此，整个

.nav

将使用5px底色。然后我在

.nav a.active

底色中使用了5px。将显示

.nav a.active

底色，但显示在不同的行上。因此，我使用

边距底部：-5px

来重叠

.nav

颜色

.nav{
列表样式类型：无；
左侧填充：0；
保证金：0；
边框底部：5px实心#ccc；
}
.导航a{
显示：内联块；
填充：0 15px 0 15px；
左边距：-4px；
文字装饰：无；
}
.导航a.激活{
边框底部：5px纯黄色；
保证金底部：-5px
}

---

只需将边框颜色更改为边框底部，如下所示

.active {
    border-bottom: 3px solid yellow;
}

---

希望这有帮助，谢谢，你知道如何添加一个黄色边框底部悬停？像这样不行“.nav a:hover{border color:yellow；}”？解释代码以及为什么做了任何更改比简单地说“试试这个”更有帮助。@Jack请不要在回答的评论中提出新问题。如果你有更多的问题，问一些新的问题来回答。如果我的意思是，你想知道如何在悬停时设置底部黄色？如果有的话。put it.nav a.active:hover{border bottom:5px纯黄色；margin bottom:-5px}谢谢，但也不起作用：。

a{text-decoration:none;}

.nav{
  border-bottom: 3px solid gray;
}

.nav a{
  padding: 15px;  
}

.nav .active{
  border-color:yellow;
  padding:20px;
}

.nav .active {
    border-bottom: 3px solid yellow;
    padding: 20px 20px 1px 20px;
}

.active {
    border-bottom: 3px solid yellow;
}