The problem is related to absolute vs. relative positioning. "Absolute" doesn't really mean "absolute", it means, "relative to the nearest parent element which is absolutely-positioned, but disregarding that parent element's content". A mouthful, I know.
What's happening is... equally hard to explain. An experiment helps.
#leftMenu ul li img
{
position:absolute;
top:340px;
left:20px;
height:100px;
width:100px;
}
Change the position to "relative". You can see that your image is PART OF the "li" element. It's position will be influenced by it. Technically, the
li is relatively-positioned, so the
img should still be absolute relative to the body, but this is a LIST, and so obeys its own box model (it's like its own private page, in a sense). Saying it another way, the LI element is seen as the parent of the image, acting
as if the LI was absolutely positioned, even though it isn't. So, the image's "top" will always be
relative to the LI's position. Said a third way: the natural order of the the elements of a list will always supercede and/or influence CSS positioning.
Your choices:
Take the images out of the MENU. Have a separate DIV, and use Javascript to position the proper image within that DIV.
-or-
Don't use a LIST for your menu. That will make your pop-outs much more difficult.
I attempt to explain CSS positioning in
this article. When you read the part about Absolute Position, just keep in mind that your LI element will act as if it is absolute.
