标签：
1）先完成一个导航条
<style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 100px; height: 40px; border:1px solid #000; float: left; margin-right: 10px; text-align: center; line-height: 40px; } </style> <div class="nav"> <ul class="nav-ul"> <li>nav1</li> <li>nav2</li> <li>nav3</li> </ul> </div>
效果如下：
2）在每个导航的最右侧做一个 下三角，考虑到代码的简洁性，每个导航条的最右侧加一个伪元素，这个伪元素需要绝对定位，所以li元素需要加上相对定位。
3)那么三角具体怎么做呢？用css，这里用到了border这个属性，当把一个块元素的高和宽都设置为0后，元素是不可见的，而当加上border边框后，元素会有区域了。比如
.template{ width: 0; height: 0; border: 50px solid ; border-color: #000 #FF0000 #FFFF00 #00FFFF; } <div class="template"></div>
4)要是我们把除了上部，其余三块border的颜色都设置为透明的了，是否就会只显示上部了？
5）继续3）中伪类的编写，
<style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ position: relative; width: 100px; height: 40px; border:1px solid #000; float: left; margin-right: 10px; text-align: center; line-height: 40px; } .nav-ul li:after{ width: 0px; height: 0px; content: ""; display: block; position: absolute; right: 10px; top: 40%; border: 10px solid ; border-color: green transparent transparent transparent ; } </style>
6）点击导航条 三角的形状，拉出下拉菜单，然后三角形变为上三角，这里需要点击事件，在点击的导航条上加一个class，class的伪元素是下三角，下三角根据上面的方法，只要将除了下部，其他三部分的颜色设置为透明
的即可。
.nav-ul li.active:after{ width: 0px; height: 0px; content: ""; display: block; position: absolute; right: 10px; top: 16% border: 10px solid ; border-color: transparent transparent green transparent ; } <div class="nav"> <ul class="nav-ul"> <li class="active">nav1</li> <li>nav2</li> <li>nav3</li> </ul> </div>
标签：
原文地址：http://www.cnblogs.com/webWf/p/4719147.html
