添加彩色条导航栏css

Question

我的导航菜单下方需要一个彩色条，但我不知道如何以正确的方式执行此操作。

我需要什么：

编辑： 我忘了问我如何将导航菜单放在徽标高度的50％处。我使用了20px的“静态”保证金，但这是一个很好的方法吗？ i.imgur.com/ApihCfJ.png

HTML

<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>

CSS

#menu  {
    margin-top:40px;
}
#menu ul {
    list-style-type: none;
}
#menu ul li {
    display: inline;
}

Answer 1

在这里你有工作演示：http://jsbin.com/olAXoSi/2/

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;
}

Answer 2

fiddle

<强> 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;
}

Answer 3

我建议使用:nth-child()选择器来实现这种效果。

以下是HTML的外观：（<!-- -->从内联中删除空格）

<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>

CSS：

#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;
}

最后，这是一个Demo。

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

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

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