I am developing a site, the development link is here...
http://u.univers.net.au/johnking
I need the three large dots second, third and forth from the left on the top row to act like a hover menu. When you hover over them, the grid of dots changes, and text appears at the bottom of the grid.
It's almost working, but I am not a css guru, and need the last 10% to make it happen. I know this can be done in JS or Flash, but I want/need this to be pure css.
How would you do this in pure css? Have I got something wrong somewhere?
Here are some images showing how it should work.

You have <div>s stuck inside <li> tags -- this is invalid coding.
You should be able to do all of that with the list items and links alone, no divs necessary.

Thanks for taking a look.

I've changed the <div>s to <li>s, and made what I thought were the right css changes, but that is not working.

You can see it at the dev link http://u.univers.net.au

The relevant css is this...

/* floats */
#logo, #image, #nav, .dotsmall, .dotlarge, .dotspace, .dotactive, .dotline, #contact, #credits, #email {
position:relative;
float:left;
}
/* Postions */
#logo {
width:560px;
height:39px;
}
#image {
width:560px; /* note: actual image is 515px wide */
height:204px;
}
#nav {
width:560px;
height:300px;
}
#nav ul {
margin:0px;
padding:0px;
position:relative;
width:100%;
}
#nav ul li {
display:inline;
float:left;
}
#nav ul ul {
position:absolute;
left:-93px;
display:none;
z-index:100;
}
#nav ul ul li {
width:560px;
}
#contact a:hover {
display:block;
}
#contact, #credits, #email{
width:93px;
height:93px;
position:relative;
z-index:1000;
cursorointer;
background: #000 url('images/dot_large.gif') no-repeat center;
}
.dotsmall, .dotlarge, .dotspace, .dotline, .dotactive{
width:93px;
height:93px;
}
.dotsmall {
background: #000 url('images/dot_small.gif') no-repeat center;
}
.dotlarge {
background: #000 url('images/dot_large.gif') no-repeat center;
}
.dotline {
background: #000 url('images/dot_large_line.gif') no-repeat center;
}