Styling a Drop-Down Menu (And the hover effect)

I have one little problem here. I'm trying to get a hover image on a menu to be dynamic. What I mean by this is that the left edge and the right edge would be a "shadow" while the rest would be one ( 1 ) solid color. The problem here though, is that the text would be of different size, so the image needs to be dynamic.



Anyone have any idea how I can accomplish that? Preferably a CSS solution (I had one before, but I lost it [The drop down]).

Any ideas on how I can make that hover to be of dynamic size? Thank you.

My Current Progress

[EDIT] What I got there right now looks perfect in Firefox... looks a little different in IE (The right shadow upon hover)

Alright, I got the dynamic links pretty much covered... there's still one bug in it though... MSIE messes up the right side of the hover a little bit. The yellow background covers half of the shadow.

Now what I'm missing is the drop down...

I'm really falling flat on my face on this one. I got the Stu Nicholl's example, but I can't seem to style it correctly

Please, I need some help here.

Where is the bug happening? In MSIE6?
It looks fine in IE7 and IE8 so I'll assume you're having the issue with IE6.

This is because IE6 only understands the ":hover" pseudo-class when it is applied to an "<a>" tag. In your stylesheet you are applying it to an "<li>" tag.

Im having this bug in ie7. The shadow on the right side is covered a little by the "golden" background. Check the difference between firefox and ie7... The right shadow is smaller in ie7

Hmmm, not sure what you're talking about. They seem to be identical between browsers on my computer. Would you mind posting a screenshot? I may be looking in the wrong area.