几个简单的导航布局

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