Adding an arrow to a list-item

Question

I want to add a right arrow for my sub menus (similar to ddsmoothmenu):

enter image description here

My sub menus have a class sub-menu.

Here is my code

<div id="centeredmenu">
<ul>
<li><a href='#'>Cat1</a></li>
<li><a href='#'>Cat2</a></li>
<li><a href='#'>Cat3</a>
    <ul class='sub-menu'>
       <li><a href="#">Sub Category</a></li>
       <li><a href="#">Sub Category</a></li>
    </ul>
</li>
</ul>
</div>

How can I add an arrow besides "Cat3"?

What do you mean by arrow? Something like this `→`? And check your syntax :) — RienNeVaPlu͢s, Sep 06 '13 at 11:09
An arrow pointing towards bottom, and where is the Syntax mistake? — 33_____________, Sep 06 '13 at 11:11

RbG · Answer 1 · 2013-09-07T13:30:13.410

1

that arrow is basically an image which is set as background for those <li>s where you need it with no-repeat and right 0 property

for example

MARK-UP

<ul>
   <li class="arrow"></li>
   <li></li>
</ul>

CSS

li.class{
   background:#000000 url(/path/to/arrow.jpg) no-repeat right 0;
}

now only for first element the arrow will be visible

edited Sep 07 '13 at 13:30

answered Sep 06 '13 at 11:23

RbG

3,181
3
32
43

Devang Rathod · Answer 2 · 2013-09-06T11:16:47.793

0

You can apply css for that select your li as below,

#centeredmenu > ul li{
   background:url(../img/arrow.png) right center;
}

Comment Response

Fiddle Demo

edited Sep 06 '13 at 11:16

answered Sep 06 '13 at 11:10

Devang Rathod

6,650
2
23
32

Is this only applies to `sub-menus` ? – 33_____________ Sep 06 '13 at 11:12
@XeBii no it will apply to cat1 cat2 and cat3 – Devang Rathod Sep 06 '13 at 11:13
@XeBii see edited answer i have edited code as per your comment – Devang Rathod Sep 06 '13 at 11:17
but i only want to apply on cat3 which has a sub menu – 33_____________ Sep 06 '13 at 11:17
i suppose this will only applies to cat3, what if i also add more Categories with sub menus :( – 33_____________ Sep 06 '13 at 11:20
@XeBii [see here](http://stackoverflow.com/questions/5281556/is-there-a-css-way-to-add-an-arrow-if-a-ul-has-a-ul-child) – Devang Rathod Sep 06 '13 at 11:27
yes, i have seen this question before posting my own, but i don't know which answer should be applied – 33_____________ Sep 06 '13 at 11:35
@XeBii the answer with 39 upvote – Devang Rathod Sep 06 '13 at 11:36

Adding an arrow to a list-item

2 Answers2