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...
<!-- Normal state --> http://i43.tinypic.com/2prtmoi.jpg <!-- Hovering dot 2 changes pattern and adds text--> http://i42.tinypic.com/2mhj3ug.jpg <!-- Hovering dot 4 changes pattern and adds text--> http://i43.tinypic.com/a4bwgm.jpg You will see that I have set up some nested <ul>s in the markup to make the dot pattern. 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; } Thanks in advance for your help, from a nubie. I have posted this already at another forum, but been told that ccs-d is the best! -- Joe Bland 61 04 1060 4090 ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
