aligning an overlay image with css with valid xhtml?

[wolfestone]

I've got a simple css pop out menu: http://wolfe.rchomepage.com

on the 'root level 1' menu button, there is a small arrow graphic, which is sitting on top of the number 1. I want this to be on the right of the button, around 6 pixels in from the edge. I just can't figure out how to get it over there though without breaking the alignment of something else, or causing my xhtml to be invalid (tried using another div but won't let me put a div inside an inline element).

I'm trying to avoid just having a button sized background graphic, complete with arrow, but I'll do that if it's the only/best way. I also found I could do it by having the arrow image in the html code, and then using css positioning but that seems quite code-heavy.

Am I missing somthing simple, or is there no easy way to do this?

My css file is here: http://wolfe.rchomepage.com/menuv.css

Thanks very much for any suggestions.

[Patrick Shannon]

Hmm...if I wanted an arrow on the right of a button, I would simply use it as a background image and put it on the right....

background: url("path/whatever") right top no-repeat;

Then I would put a padding-right with a size that exceeds the width of the arrow (6 pixels or whatever) so that the text doesn't overlap it.

You already have another background defined, though....one route would be as you said, creating a background with the arrow manually on the right if your button widths are always going to be the same size. The other choice is to do as I said above using a transparent gif as the arrow and defining that background one something else above the button.....maybe like div#menu li a.

[wolfestone]

Thanks for the help, the second method sounds like it'll suit my needs better. I don't yet know the button widths, and I think the option to add more buttons later, which may need to be wider would probably be simpler if it didn't need new button graphics created.

Thanks again, I really appreciate it.