怎样在导航栏里的文字后面添加下拉三角（运用代码书写）

一、导航栏里文字后面的下拉三角 HTML 代码：

1 <div class="site-nav-send">
2     送至：北京
3     <i><s>◇</s></i>  <!--下拉三角的结构-->
4 </div>

　为什么要使用代码写下拉菜单的小三角这种小的效果图，而不用图片代替呢？因为代码的执行速度要远快于图片的渲染速度，可提高网页的加载速度。所以一般这样的小效果都运用代码来写。

　　首先先将小三角的格式书写出来，就是在文字的后面加一个菱形，然后编写它的css样式。后续可运用css3让小三角实现旋转效果，这里就不介绍了，本次只制作静态的三角。

　　小三角制作原理图：

　　
使用一大一小两个盒子，大盒子套小盒子，小盒子里装菱形，通过定位将小盒子定位到大盒子中合适的位置，使菱形在大盒子里显示一半，运用 overflow: hidden 将超出的部分清除，这样就只剩下一个向下的三角。再将大盒子定位到文字后面合适的位置即可。

二、css 代码：

 1     .site-nav-send {
 2         padding: 0 25px 0 10px;
 3         position: relative;
 4     }
　　　　/*鼠标移动盒子上面，改变背景色*/
 5     .site-nav-send:hover {
 6         background-color: #fff;  
 7     }
　　　　/*大盒子样式*/
 8     .site-nav-send i {
 9         position: absolute;
10         right: 7px;
11         top: 12px;
12         width: 15px;
13         height: 7px;
14         overflow: hidden;
15     }
　　　　/*小盒子样式*/
16     .site-nav-send s {
17         position: absolute;
18         top: -7px;
19         font: 400 15px/15px "consolas";
20     }

代码复用

一个网页里一般会有许多的下拉三角，一个一个写太麻烦，这时就可以运用代码复用，即和上面的小三角公用一个css代码。如下：

 1     .site-nav-send,
 2     .site-nav-right .fore {
 3         padding: 0 25px 0 10px;
 4         position: relative;
 5     }
 6     .site-nav-send:hover {
 7         background-color: #fff;
 8     }
 9     .site-nav-send i,
10     .fore i {
11         position: absolute;
12         right: 7px;
13         top: 12px;
14         width: 15px;
15         height: 7px;
16         overflow: hidden;
17     }
18     .site-nav-send s,
19     .fore s {
20         position: absolute;
21         top: -7px;
22         font: 400 15px/15px "consolas";
23     }

只需将类名添加到后面即可，至此下拉三角的代码就写完了。