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