CODEWITHSUNDEEP
css
IceDawg
IceDawg

Reputation: 327

How to add arrow beside some links in CSS?

How would I add a small arrow beside the links that have a drop down in css? 

background: url('arrow.png') no-repeat 0 0;

When I use this it adds an arrow on the left side of EVERY link but i want it only on the ones that have a sub menu.

Any help?

Upvotes: 0

Views: 3588

Answers (3)

Arbel
Arbel

Reputation: 30989

Use this:

background: url('arrow.png') no-repeat right top / 70% 70%;

The 70% percentages are for example, they are the width and height of the background size, change them as they suit you. (Since you wanted it smaller in your original question).

Apply this rule to the class of the links that will have a drop down.

Upvotes: 1

James Green
James Green

Reputation: 1753

Based on the other answers you've had it looks like your question has changed considerably... but to answer it as it stands, if you just want it on SOME of the links, you could add an additional class to those links, and add your background image just to that class.

Upvotes: 0

grandivory
grandivory

Reputation: 639

http://www.w3schools.com/cssref/css3_pr_background.asp is a good reference for any sort of CSS syntax questions.

The way that you defined the CSS rule puts the arrow at the top left. To have it centered on the right, for example, use:

background: url('arrow.png') no-repeat right center;

I would also suggest adding a padding if you do that, so that the background image is not behind the text:

padding-right: 15px;

And to make padding work, you'll need to override the display of the links from inline to inline-block:

display: inline-block;

To resize the arrow, you could either just use a smaller image, or you could use the background-size attribute, although using the latter would lose support for IE8 and below.

Upvotes: 0

Related Questions