如何使用CSS将图像附加到框的顶部

Question

Im having a menu which drop down when a div is hovered like this

http://www.flickr.com/photos/41695354@N08/5591505298/

I want to add a arrow at the top of that menu like this

http://www.flickr.com/photos/41695354@N08/5591505300/

How to achieve this

Answer 1

One of the ways is, you can style your "Account" box, so that it is position: relative , so that inside this box, there is an arrow image, with position: absolute , and you can adjust the top and left to position the arrow image right at the top of "Account" box.

An absolute positioned element is absolute to the nearest ancestor element where the position is not static . So relative counts. Just make sure there is no top or left set for the "Account" box.