几个简单的导航布局

html结构

<div class="severce-tabs">
<ul class="service-tabs-inner">
<li class="on">
<a href="#">主页</a>
</li>
<li>
<a href="#">推荐</a>
</li>
<li>
<a href="#">导航</a>
</li>
<li>
<a href="#">购物</a>
</li>
</ul>
</div>

css

.service-tabs-inner{
width:1200px;
margin:0 auto;
}
.service-tabs-inner:after{
content:"";
display: block;
clear:both;
}
.service-tabs-inner li{
float: left;
list-style: none;
text-align: center;
position: relative;
}
.service-tabs-inner li a{
display: block;
width:120px;
height:60px;
text-decoration: none;
line-height: 60px;
color:#666;
font-size: 20px;
}

效果1,高亮背景



添加伪类

.service-tabs-inner li a:hover{
color:#2CC185;
}
.service-tabs-inner li.on a{
background-color: #2CC185;
color:#fff;
}

效果2.高亮下添加三角形



添加伪元素

.service-tabs-inner li.on a:after{
content: "";
display: block;
position: absolute;
left:57.5px;
border-top:5px solid #2CC185;
border-left:5px solid transparent;
border-right:5px solid transparent;
}

效果3。高亮添加下划线



添加样式，注意高度变化

.service-tabs-inner li.on a{
border-bottom: 2px solid #2CC185;
height:58px;
color:#2CC185;
}