列表项下/下的CSS边框

我有一个导航栏的列表。我希望在活动li项下方有边框，而不仅仅是底部

我已经能够使用BorderBottom将边框添加到底部，但同样，它需要位于li元素的下方。任何帮助都将不胜感激

除了默认引导导航栏列表之外，以下是我迄今为止的自定义css：

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

见下文：

---

只是一个例子。。。。。使用边框底部和背景剪辑填充框

ul{
列表样式类型：无；
}
李{
高度：50px；
宽度：180px；
线高：50px；
边框底部：5px实心透明；
背景：ddd；
显示：内联块；
文本对齐：居中；
背景剪辑：填充框；
}
李：悬停{
边框底部：5px纯金；
}

你好
世界

像这样试试：

CSS:

HTML:

对于这样的小细节，我通常使用：after来获得菜单项正常高度以外的边框

HTML:

<ul>
    <li>Home</li>
    <li class="active">About</li>
    <li>Contact</li>
    <li>Blog</li>
</ul>
<div class="main"> 
    Next Box
</div>

大多数css只是用于演示，但关键内容是li、li.active和li.active:after

---

您可以在

查看我的演示，这是我经常使用的示例。希望这能对您有所帮助；）
此方法使用“li”元素的最后一个子元素作为边框。
“li”元素上的“selected”类选择要保留在初始位置的边框位置。
当鼠标位于其中一个菜单栏按钮上时，菜单栏后面会出现一个动画。
如果您不想要动画，请删除“.menu>li:last child”类中的所有过渡CSS样式。

如果您想了解更多关于最后一个子CSS样式的信息，请访问此链接>>

.menu、.menu li{
保证金：0；
填充：0；
列表样式：无；
显示：内联块；
}
.菜单{
保证金：自动；
位置：相对位置；
溢出：隐藏；
高度：25px；
}
.menu li{填充：0px 5px；}
.菜单>李{
文本对齐：居中；
宽度：80px；
字体大小：14px；
}
.菜单>李>a{
显示：块；
填充：0px 0px；
颜色：#444；
文字装饰：无；
字体大小：15px；
-webkit过渡：颜色0.5s轻松；
-moz过渡：颜色0.5s轻松；
-ms过渡：颜色0.5s；
-o型过渡：颜色0.5s；
过渡：颜色0.5s；
}
.菜单a:悬停{
颜色：#ffa500；
}
.菜单>李：最后一个孩子{
位置：绝对位置；
顶部：20px；
右：-90px；
高度：5px；
宽度：80px；
背景：#ffa500；
-webkit转型：转型0.5s轻松；
-moz过渡：0.5s轻松转换；
-ms转换：转换0.5s轻松度；
-o型转换：转换0.5s轻松度；
转型：转型0.5s轻松；
}
.菜单。已选定{
位置：相对位置；
指针事件：无；
游标：默认值；
}
.选择a{
颜色：#ffa500！重要；
}
.menu li:第n个子项（1）：悬停~li:最后一个子项{
-webkit转换：translateX（-375px）！重要；
-moz变换：translateX（-375px）！重要；
-ms转换：translateX（-375px）！重要；
-o-变换：translateX（-375px）！重要；
转换：translateX（-375px）！重要；
}
.menu li:第n个子项（1）。已选择~li:最后一个子项{
-webkit转换：translateX（-375px）；
-moz变换：translateX（-375px）；
-ms变换：translateX（-375px）；
-o-变换：translateX（-375px）；
转换：translateX（-375px）；
}
.menu li:n子菜单（2）：悬停~li:最后一个子菜单{
-webkit转换：translateX（-280px）！重要；
-moz变换：translateX（-280px）！重要；
-ms转换：translateX（-280px）！重要；
-o变换：translateX（-280px）！重要；
转换：translateX（-280px）！重要；
}
.菜单li:第n个子项（2）.已选择~li:最后一个子项{
-webkit转换：translateX（-280px）；
-moz变换：translateX（-280px）；
-ms变换：translateX（-280px）；
-o变换：translateX（-280px）；
转换：translateX（-280px）；
}
.menu li:n子菜单（3）：悬停~li:最后一个子菜单{
-webkit转换：translateX（-185px）！重要；
-moz变换：translateX（-185px）！重要；
-ms转换：translateX（-185px）！重要；
-o变换：translateX（-185px）！重要；
转换：translateX（-185px）！重要；
}
.menu li:第n个孩子（3）。已选择~li:最后一个孩子{
-webkit转换：translateX（-185px）；
-moz变换：translateX（-185px）；
-ms变换：translateX（-185px）；
-o变换：translateX（-185px）；
转换：translateX（-185px）；
}
.menu li:第n个孩子（4）：悬停~li:最后一个孩子{
-webkit转换：translateX（-90px）！重要；
-moz变换：translateX（-90px）！重要；
-ms转换：translateX（-90px）！重要；
-o变换：translateX（-90px）！重要；
转换：translateX（-90px）！重要；
}
.menu li:第n个子项（4）。已选择~li:最后一个子项{
-webkit转换：translateX（-90px）；
-moz变换：translateX（-90px）；
-ms变换：translateX（-90px）；
-o-变换：translateX（-90px）；
转换：translateX（-90px）；
}

创建一个演示您目前尝试的内容？让我们看看您至少可以使用哪些HTML。一些CSS也会很好！但是巴德，我想你必须使用背景剪辑填充框，因为我使用了你的替代框阴影。这只需要一行代码。我感谢大家的帮助。

<ul class="nav">
    <li><a href="#"> Menu 1</a>
    </li>
    <li class="active"><a href="#"> Menu 1</a>
    </li>
    <li><a href="#"> Menu 1</a>
    </li>
    <li><a href="#"> Menu 1</a>
    </li>
</ul>

<ul>
    <li>Home</li>
    <li class="active">About</li>
    <li>Contact</li>
    <li>Blog</li>
</ul>
<div class="main"> 
    Next Box
</div>

html,body{
    margin:0px;
    padding:0px;
}
ul{
    /* for looks */
    list-style:none;
    margin:0px;
    padding:0px;
}
li{
    background:black;
    color:white;
    display:inline-block;
    margin:0px;
    padding:5px 20px;
}
li.active{
    position:relative;
}
li.active:after{
    content:'';
    position:absolute;
    top:100%;
    left:0px;
    border-top:5px solid yellow;    
    width:100%;
}
.main{
    background-color:#dddddd;
    min-height:400px;
}