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

      作为一个前端的初学者，我想通过写博客的方式把每天在学习中遇到的问题做一个总结。方便以后翻看，加深记忆。学习是循序渐进的过程，希望能通过每天一点点的积累提高自身水平。

　　一、导航栏里文字后面的下拉三角 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";
    }

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