Html 添加彩色导航栏css

我需要在我的导航菜单下有一个彩色的条，但我不知道如何用正确的方式来做

我需要的是：

编辑： 我忘了问如何将导航菜单放置在徽标高度的50%。我使用了20像素的“静态”边际，但这是一个好方法吗？i、 imgur.com/apichcfj.png

HTML

CSS

 #menu  {
margin-top:40px;
}

#menu ul {
    list-style-type: none;
}
#menu ul li
{
    display: inline;
}
#menu ul li a {

text-decoration:none;    
    color:#666;

}

#first
{
    border-bottom:2px solid blue;

}

#second
{
    border-bottom:2px solid red;
}

#third
{
    border-bottom:2px solid green;
}

#fourth
{
    border-bottom:2px solid yellow;
}

---

我建议使用

：nth-child（）

选择器来实现这种效果

下面是HTML的外观：（

从内联中删除空白）

最后，这里是一个例子

我还对CSS进行了以下外观更改：

#menu ul li {
    display: inline-block;
}

#menu ul li a {
    display: block;
    text-decoration: none;
    font-size: 22px;
    color: #2b2b2b;
    padding-right: 20px;
}

---

这里是您的工作演示：

---

这只会在每个项目下创建一条红线。我会让他的代码保持不变，并为每个菜单项添加一个ID，这样他就可以单独定制底部栏的颜色。使用每个

的右键填充使颜色彼此相邻是一种好方法吗，因为颜色距离

@user3104933的最后一个字符正好20像素？这真的没关系。哦，是的，你是对的！：）感谢大家快速/有益的回复@用户3104933否，不要对

li

元素使用填充，在创建

li

作为菜单保持器时，为

a

元素指定填充和样式。您将获得更好的编写代码和更大的可点击区域。将

LI

元素视为虚拟容器。嗯，jsBin今天有点慢，但是对于努力和干净的代码来说+1

 #menu  {
margin-top:40px;
}

#menu ul {
    list-style-type: none;
}
#menu ul li
{
    display: inline;
}
#menu ul li a {

text-decoration:none;    
    color:#666;

}

#first
{
    border-bottom:2px solid blue;

}

#second
{
    border-bottom:2px solid red;
}

#third
{
    border-bottom:2px solid green;
}

#fourth
{
    border-bottom:2px solid yellow;
}

<div id="menu">
    <ul>
        <li><a href="/home/" title="Home">Home</a>
        </li><!--
        --><li><a href="/over-ons/" title="Over ons">Over ons</a>
        </li><!--
        --><li><a href="/producten/" title="Producten">Producten</a>
        </li><!--
        --><li><a href="/contact/" title="Contact">Contact</a></li>
    </ul>
</div>

#menu ul li:nth-child(1) {
    border-bottom: 2px solid teal;
}

#menu ul li:nth-child(2) {
    border-bottom: 2px solid brown;
}

#menu ul li:nth-child(3) {
    border-bottom: 2px solid lime;
}

#menu ul li:nth-child(4) {
    border-bottom: 2px solid yellow;
}

#menu ul li {
    display: inline-block;
}

#menu ul li a {
    display: block;
    text-decoration: none;
    font-size: 22px;
    color: #2b2b2b;
    padding-right: 20px;
}

li {
  display: inline-block;
  width: 150px;
  border-bottom-style: solid;
  border-bottom-width: 4px;
  margin: -5px ;
  padding: 0 15px 0 0 ;
}

.item-1 {
  border-bottom-color: red;
}
.item-2 {
  border-bottom-color: yellow;
}
.item-3 {
  border-bottom-color: green;
}
.item-4 {
  border-bottom-color: blue;
}