List is displaying behind body

HTML & CSS
1

Hey ho,
I’ve used the excellent CSS Anthology to create a purely CSS dropdown menu, and it works well - the menu drops out when I mouse over the correct part of the navigation. Except that the nav is directly above the main body of my page, which is essentially text in a large, transparent box.
I can’t click on any of the links on the dropdown menu because it is displaying underneath the main body area. :confused:
The page I am referring to is here: http://icespark.xtreemhost.com/test/
Mouse over ‘Portal’ to see the effect. I’m not sure whether it’s just Google Chrome, which is what I’m using, or something wrong with the CSS - which can be found in the same directory as the link above, as ‘style.css’.
It would be extremely helpful if somebody could shed some light on the subject.

-phlum

2

Using position:absolute for layout of major elements is not a good idea, as they don’t recognize each other and so don’t interact with each other. On my screen (large) the Lorem Ipsum section is way below the nav, so it would be better to use pixels to position it at least.

Anyhow, a quick solution to your problem (leaving aside layout methods) is to add a z-index to your nav div:

#navigation {
	font-size: 85%;
	padding: .5em;
	text-align: center;
	position: absolute;
	top: 5.8em;
	left: .1em;
        [COLOR="Red"]z-index: 20;[/COLOR]
}
3

Brilliant, that seems to have worked.
About the screen issue, I’ll have to test it out on other computers, as I’m using a measly netbook :-\
Could you show me what it looks like in your browser?

4

OK, screen shot attached.

5

I’ve changed it to pixels. Try it out now, it should work.

6

Yep, that’s better. :slight_smile: