最简单的滑动条导航栏

css:

ul li{
display: inline;
margin-right: 3em;
}
ul{
margin:8em auto;
margin-left: 20%;
}
ul li:hover{
border-bottom: 2px solid #000;
}

 

html:

<ul>
<li>loveyoumom</li>
<li>loveyoumom</li>
<li>loveyoumom</li>
<li>loveyoumom</li>
<li>loveyoumom</li>
</ul>

还可 通过调节li的padding-bottom/top来改变滑动条到导航栏的距离。