Html 添加一个简单的向下箭头图像到下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12089679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a simple down arrow image to drop down menus
提问by Josh Naylor
I have a site where certain menu headings are drop down (css)
我有一个网站，其中某些菜单标题是下拉的 (css)
I want to add a small down facing arrow onto the certain menu headers that are able to drop down. Can anyone give me any ideas how to do so?
我想在某些可以下拉的菜单标题上添加一个向下的小箭头。任何人都可以给我任何想法如何做到这一点？
回答by Jure C.
Just use this character: http://www.fileformat.info/info/unicode/char/25bc/index.htm
只需使用这个字符：http: //www.fileformat.info/info/unicode/char/25bc/index.htm
▼ - ▼
回答by Sprose
a:after{
content: '';
border: 4px solid transparent;
border-top: 4px solid white;
margin-left: 2px;
margin-bottom: 3px;
display: inline-block;
vertical-align: bottom;
}
I think this is the best way to do it, as you can adjust the border for the length and adjust the 'border-top' for the height, giving you full customization.
我认为这是最好的方法，因为您可以调整长度的边框并调整高度的“border-top”，让您完全自定义。
回答by Max
If you are using bootstrap, you can do the following:
如果您使用的是引导程序，则可以执行以下操作：
<span class="caret"></span>
This will insert a small down arrow wherever the span is placed.
这将在放置跨度的任何位置插入一个小的向下箭头。
回答by Shriram Panchal
If you've creating menu and, you want the arrow not fill black in the arrow try this code: (to: arrow not fill any color)
如果您创建了菜单，并且希望箭头不在箭头中填充黑色，请尝试以下代码：（至：箭头不填充任何颜色）
∇ - ?回答by Avdhut
Try the following code to add the arrow, customize the height and widht and position for the arrow as per your need.
尝试使用以下代码添加箭头，根据需要自定义箭头的高度和宽度以及位置。
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;
}
