Geek asks and answers

Add a simple down arrow to dropdown menus

I have a website on which drop-down menu headers (css)

I want to add a small down arrow to certain menu headings that may fall out. Can anyone give me any ideas how to do this.

thank

+5
source share
6 answers

Just use this symbol: http://www.fileformat.info/info/unicode/char/25bc/index.htm

▼  - ▼
+16
source 
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 this, as you can adjust the border for the length and adjust the "border-top" for the height, giving you the full setup.

+5
source

, .

0

, :

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

, .

0

If you create a menu and want the arrow to not fill the black in the arrow, try this code: (so that: the arrow does not fill any color)

&nabla; - ∇
Run code
0
source

Try the following code to add an arrow, adjust the height and width and position of the arrow to suit your needs.

    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; 

  }
-1
source

More articles:


All Articles