添加一个简单的向下箭头图像到下拉菜单

Question

我有一个网站，其中某些菜单标题下拉（css）

我想在一些能够下拉的菜单标题上添加一个小的向下箭头。谁能给我任何想法怎么做？

Answer 1

只需使用此字符：http://www.fileformat.info/info/unicode/char/25bc/index.htm

▼  - ▼

Answer 2

a:after{
    content: '';
    border: 4px solid transparent;
    border-top: 4px solid white;
    margin-left: 2px;
    margin-bottom: 3px;
    display: inline-block;
    vertical-align: bottom;
}

我认为这是最好的方法，因为您可以调整长度的边框并调整高度的“border-top”，为您提供完全自定义。

Answer 3

如果您使用的是bootstrap，则可以执行以下操作：

<span class="caret"></span>

这将在放置跨度的任何地方插入一个小向下箭头。

Answer 4

如果您正在创建菜单，并且您希望箭头中的箭头不填充黑色，请尝试以下代码:(要：箭头不填充任何颜色）

∇ - ∇

Answer 5

尝试使用以下代码添加箭头，根据需要自定义箭头的高度和宽度以及位置。

    li.has_child:after {  
        content: '';   
        position: absolute;   
        border: 7px solid transparent; 
        /* This will set the direction of the arrow.*/  
         border-top: 7px solid white; 
           top: 34px; 
        margin-left: 5px; 

  }