Style arrow in menu

Question

i am using some simple menu CSS, some parts need to be unpuck and to let my website users know this menu have some submenu options i want to put arrow close to it.

It should look like: http://funedit.com/imgedit/soubory/small_19971213581407508176.jpg

And my code looks like:

CSS

.filter{
    margin-left:20px;
    position: relative;
}

.filter a{
    color: #888888;
    float: left;
    width: 120px;
    height: 35px;
    text-decoration: none;
    padding: 0.2em 0.6em;
    font-size: 120%;
    text-align: center;
}

li:after {
    content: "";
    background-image: url("../images/filter_arrow.png");
    background-repeat: repeat-x;
    display: block;
    width: 25px;
    height: 13px;
    margin: 0;
    position: absolute;
    right: 480px;
    top: 100px;
    vertical-align: middle;
}

HTML:

<div class="filter">
   <ul>
      <li><a href="#">Progress</a></li>
      <li><a href="#">Claimed number</a></li>
      <li><a href="#">Make</a></li>
      <li><a href="#">Status</a></li>
   </ul>
</div>

EDIT: Yea sorry guys i forgot on some CSS i am using above as well in my other code, its:

ul{
    list-style-type: none;
    float: left;
    width: 100%;
    padding-left: 0px;
}

li{
    display: inline;
}

Is here anyone who can help me to fix this problem with arrows? Because on my version they are just randomly separate on website at the moment.

Can you give us all the relevant code you have so far? [This is what your current code gives us](http://jsbin.com/hiqigati/1/edit) — Zach Saucier, Aug 08 '14 at 14:33
As a first thought you could try `li a:after {}` instead of `li:after {}` but as @ZachSaucier said, a working jsfiddle or something would help us help you.. — Ella Ryan, Aug 08 '14 at 14:37
@ZachSaucier Sorry i edit it and EllaRyan Arrow dont need to be a href but thanks anyway, good point — Martin Ferko, Aug 08 '14 at 14:41
The problem is you have set the `:after` to be position absolute (which is fine) but you haven't set the `li` to `position:relative` which would be more logical. — Paulie_D, Aug 08 '14 at 14:53

score 4 · Accepted Answer · answered Aug 08 '14 at 14:36

4

http://css-tricks.com/snippets/css/css-triangle/

this should help you, insert the triangle using

<span class=".arrow-down"></span>

or ::after.

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
}

answered Aug 08 '14 at 14:36

aahhaa

2,240
3
19
30

Thanks mate, in this situation its helpfull :) – Martin Ferko Aug 08 '14 at 14:45

score 0 · Answer 2 · answered Aug 08 '14 at 16:40

0

You could just use unicode arrow sign :)

▾ ▾

or

▼ ▼

answered Aug 08 '14 at 16:40

Bodzio

2,440
2
19
37

Style arrow in menu

2 Answers2