利用overflow实现导航栏中常 出现的倒三角下拉小图标

常用网页界面中，导航栏中的倒三角下拉小图标实现，可用overflow：

效果如右图：

 .Triangle{position:relative;width:280px;height:15px;}
 .T-son{position:absolute;height:8px;width:15px;display:inline-block;right:35px;bottom:;overflow:hidden;}
 .T-sec-son{font-size:15px;line-height:15px;position:absolute;display:inline-block;bottom:;color:#8E8E8E;}
 .pull-down{font-family:@微软雅黑;color:#D0D0D0;font-size:15px;float:right;}

 <div class="Triangle"         
span class="T-son"><span class="T-sec-son">◇</span></span>
          <span class="pull-down">more</span><!--描述下方的倒三角下拉小图标与“more”实现-->
4 </div>

将符号◇用输入法的软键盘输入，利用overflow超出父容器部分隐藏的特性，让我们需要的下半边三角让其在父容器里面，故父元素(.T-son)高位符号的一半，宽度相同（强调：父容器的宽度也是需要设置的，否则会让其整个内容被隐藏），再让其都绝对定位，bottom:0让其都底边对其，输入的符号下部分在父容器中，上部分被隐藏，达到效果。

还需知的是：overflow起作用的前提：

1.元素为非display：inline元素---->故需要设施span标签的display类型；

2.对应方位的尺寸限制；

这是我界面练习时所感所想，有不足之处请多多指教，谢谢！