Question

I am working on a css menu and want all the ones that have submenus have a little > image at the side of the box.

Here is the code: http://jsfiddle.net/u9KrH/4/
There are also two JS files that go with it, but i can’t attach those to that editor, but you can see it in action here: http://trulyscience.com/test/index.php

I hoped that changing ul.dropdown li:last-child a would do the job, but that didn’t fix it at all. So now I am clueless, does anybody have any suggestions?

Answer 1

On that trulyscience.com page, you just need to tweak the background property for ul.dropdown li:last-child a.

CSS defaults to tiling backgrounds, so you need to replace

background-image: url('images/redarrow.jpg');

with

background: url('images/redarrow.jpg') no-repeat right center;

Which positions the background and stops it repeating. You can also use px or % values in place of ‘right’ and ‘center’.

A more verbose version of the same code is:

background-image: url('images/redarrow.jpg');
background-position: right center;
background-repeat: no-repeat;

The result is:

Becomes: