怎样在导航栏里的文字后面添加下拉三角（运用代码，不是用那种图片。)
一、导航栏里文字后面的下拉三角 HTML 代码：
<div class="site-nav-send">
送至：北京
<i><s></s></i>
<!--下拉三角的结构-->
</div>
为什么要使用代码写下拉菜单的小三角这种小的效果图，而不用图片代替呢？因为代码的执行速度要远快于图片的渲染速度，可提高网页的加载速度。所以一般这样的小效果都运用代码来写。
首先先将小三角的格式书写出来，就是在文字的后面加一个菱形，然后编写它的css样式。后续可运用css3让小三角实现旋转效果，这里就不介绍了，本次只制作静态的三角。
小三角制作原理图：
使用一大一小两个盒子，大盒子套小盒子，小盒子里装菱形，通过定位将小盒子定位到大盒子中合适的位置，使菱形在大盒子里显示一半，运用 overflow: hidden 将超出的部分清除，这样就只剩下一个向下的三角。再将大盒子定位到文字后面合适的位置即可。
css 代码：
.site-nav-send {
padding: 0 25px 0 10px;
position: relative;
}
/*鼠标移动盒子上面，改变背景色*/
.site-nav-send:hover {
background-color: #fff;
}
/*大盒子样式*/
.site-nav-send i {
position: absolute;
right: 7px;
top: 12px;
width: 15px;
height: 7px;
overflow: hidden;
}
/*小盒子样式*/
.site-nav-send s {
position: absolute;
top: -7px;
font: 400 15px/15px "consolas";
}
一个网页里一般会有许多的下拉三角，一个一个写太麻烦，这时就可以运用代码复用，即和上面的小三角公用一个css代码。如下：
.site-nav-send,
.site-nav-right .fore {
padding: 0 25px 0 10px;
position: relative;
}
.site-nav-send:hover {
background-color: #fff;
}
.site-nav-send i,
.fore i {
position: absolute;
right: 7px;
top: 12px;
width: 15px;
height: 7px;
overflow: hidden;
}
.site-nav-send s,
.fore s {
position: absolute;
top: -7px;
font: 400 15px/15px "consolas";
}
只需将类名添加到后面就行啦。
