I'm having trouble making a menu using an <ul> and background-images for the a:hover in the <li>'s. How do you get the bg images to 'resize' for the different sized <li>'s such as in this example? http://www.cssplay.co.uk/menus/pro_drop2.html I noticed another background-image is placed in the ul li a:hover b rule. Is this how they are doing it? Thanks.
.menu2 li a.top_link:hover {color:#fff; background: url(prodrop2/button4.gif) no-repeat;} .menu2 li a.top_link:hover span {background:url(prodrop2/button4.gif) no-repeat right top;} I dunno why he's repeating this, setting the same background for the a and the span. But first he has a big long image (type in http://www.cssplay.co.uk/menus/prodrop2/button4.gif to see it) for a span (not sure what it's doing there) then has a repeating grey background behind the actual ul (prodrop2/button1a.gif). On hover, the code at the top of my message says both for the anchor (text) and the span (I think you could just say for the span but maybe not) use the blue prodrop/button4.gif image. I don't see him setting a width, and a span being an inline element normall has the width of whatever's in it (in this case, the text). So, the longer the text, the longer the span. Look closely at his CSS and you'll see there is a line-height and a height but no width. Only I think a width of the ul. You could maybe also do the sliding-doors thing where the li has the left-half of the image and the a has the right-half or something. So long as one of the images is very wide, the box can grow in width and there is always a background image.