alhermette - 10:17 pm on Oct 29, 2012 (gmt 0)

I have a horizontal menu with dropdowns that is three levels deep. It is a sytled unordered list.

So far it is all working fine but I wanted to add some arrows to any element that contains child elements to make it more intuitive.

I added the following code:

/* set up the right arrows first */
#Navigation li > a:after
{
content:'\25B6';
}

/* set up the downward arrow for top level items */
#Navigation > ul > li > a:after
{
content:'\a0\a0\a0\25BC';
font: bold 12px Arial, Helvetica, Sans-serif;
}

/* clear the content if a is only child*/
#Navigation li > a:only-child:after
{
content: '';
}

This works well, the horizontal menu has downward pointing arrows in all the right places and the dropdown has right pointing arrows in all the right links.

The problem is that the right pointing arrows in the dropdown appear immediately after the hyperlink. In order to look right I need to basically right align them.

I tried amending the code like this:

/* set up the right arrows first */
#Navigation li > a:after
{
content:'\25B6';
position: absolute;
right: 10px;
}

The right pointing arrows in the dropdown are now perfectly aligned just as I want them. The problem is that the downward pointing arrows in the horizontal menu have just dissappeared. . .

it seems to be the position: absolute; that is causing the problem but I can't think of any other way of aligning the arrows (whilst leaving the hyperlink text left aligned) and I'm not sure why it is having this effect.