Html 如何在css中使边框位于另一个边框之上？

我正在尝试创建一个导航栏，默认情况下它有一个特定颜色的

边框顶部

，当鼠标悬停或处于活动状态时，我希望另一种颜色位于其顶部

有什么方法可以让这一切顺利进行吗

我试过：

• 绝对值

• z-index

但对我来说都不管用

.navbar{
背景色：#ecf0f1；
}
.navbar>.main nav>ul，li{
列表样式类型：无；
文字装饰：无；
}
.navbar>主导航>ul{
最小高度：60px；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ecf0f1；
边框顶部：5px实心#d1d064；
框大小：边框框；
}
.navbar>.main nav>ul>li{
文本对齐：居中；
最小宽度：150px；
}
.navbar>main nav>ul>li>a{
显示：块；
颜色：#7373；
文本对齐：居中；
填充：20px 16px；
文字装饰：无；
字体系列：“Lato”，无衬线；
字号：800；
}
.navbar>main nav>ul>li.active{
边框顶部：厚实线#0F9E5E；
}
.navbar>.main导航{
最大宽度：1480px；
保证金：0自动；
}

尝试使用

框阴影

默认设置或插入

例如：

box-shadow: 0 -10px 0 0 red;

或

还是一个组合

box-shadow: 0 -10px 0 0 red, 10px 0 0 blue, inset 10px 0 0 green;

结合边框，您应该可以获得所需的效果。
尝试使用
框阴影


默认设置或插入

例如：

box-shadow: 0 -10px 0 0 red;

或

还是一个组合

box-shadow: 0 -10px 0 0 red, 10px 0 0 blue, inset 10px 0 0 green;

与边框结合使用，您应该可以获得所需的效果。
您可以设置
标签样式，以占用其父标签的整个空间，并在其上放置（活动）边框，而不是使您的
标签处于活动状态。然后在
：悬停
，在
标记上放置另一个边框-它将使其显示在顶部。为避免大小跳跃，请为您的
设置一些透明边框，边框大小与您在
上设置的边框大小相同：悬停

a {
  display: block;
  width: 100%;
  height: 100%;
}
a.active {
  border-top: thick solid #0F9E5E;
}
li {
  border-top: thick solid transparent;
}
li:hover, li:active {
  border-top: thick solid red; // color of your choice
}

您可以设置
标记的样式，以占用其父标记的整个空间，并在其上放置（活动）边框，而不是使您的
标记处于活动状态。然后在
：悬停
，在
标记上放置另一个边框-它将使其显示在顶部。为避免大小跳跃，请为您的
设置一些透明边框，边框大小与您在
上设置的边框大小相同：悬停

a {
  display: block;
  width: 100%;
  height: 100%;
}
a.active {
  border-top: thick solid #0F9E5E;
}
li {
  border-top: thick solid transparent;
}
li:hover, li:active {
  border-top: thick solid red; // color of your choice
}

删除页边空白顶部并添加！对于元素li.active和li:hover上的边框样式很重要

检查此代码段


.navbar{
背景色：#ecf0f1；
}
.navbar>main nav>ul，
李{
列表样式类型：无；
文字装饰：无；
}
.navbar>主导航>ul{
垫面：1px；
最小高度：60px；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ecf0f1；
边框顶部：7px实心#d1cf82；
框大小：边框框；
z指数：-1；
}
.navbar>.main nav>ul>li{
文本对齐：居中；
最小宽度：150px；
}
.navbar>main nav>ul>li>a{
显示：块；
颜色：#7373；
文本对齐：居中；
填充：20px 16px；
文字装饰：无；
字体系列：“Lato”，无衬线；
字号：800；
}
.navbar>main nav>ul>li.active{
边框顶部：厚实#0F9E5E！重要；
框大小：边框框；
z指数：1；
}
.navbar>.main nav>ul>li:悬停{
边框顶部：厚实#fff！重要；
}
.navbar>.main导航{
最大宽度：1480px；
保证金：0自动；
}









删除页边距顶部并添加！对于元素li.active和li:hover上的边框样式很重要

检查此代码段


.navbar{
背景色：#ecf0f1；
}
.navbar>main nav>ul，
李{
列表样式类型：无；
文字装饰：无；
}
.navbar>主导航>ul{
垫面：1px；
最小高度：60px；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ecf0f1；
边框顶部：7px实心#d1cf82；
框大小：边框框；
z指数：-1；
}
.navbar>.main nav>ul>li{
文本对齐：居中；
最小宽度：150px；
}
.navbar>main nav>ul>li>a{
显示：块；
颜色：#7373；
文本对齐：居中；
填充：20px 16px；
文字装饰：无；
字体系列：“Lato”，无衬线；
字号：800；
}
.navbar>main nav>ul>li.active{
边框顶部：厚实#0F9E5E！重要；
框大小：边框框；
z指数：1；
}
.navbar>.main nav>ul>li:悬停{
边框顶部：厚实#fff！重要；
}
.navbar>.main导航{
最大宽度：1480px；
保证金：0自动；
}





























如果向透明的
li
添加边框，则根据处于活动状态或悬停状态更改其颜色

注意，我清理了一些代码，并删除了
页边距顶部：-5pxli
上的code>，因为它隐藏了第一个项目的上边框


.navbar{
背景色：#ecf0f1；
}
.navbar>main nav>ul，
李{
列表样式类型：无；
文字装饰：无；
}
.navbar>主导航>ul{
最小高度：60px；
保证金：0；
填充：0；
溢出：隐藏；
框大小：边框框；
}
.navbar>.main nav>ul>li{
边框顶部：厚实透明；
文本对齐：居中；
闵威