Mouseover menu

[malone19]

I'm looking to make a menu similar to that on <snipped url> where the mouseover brings up a opaque box with a layout of different options.

Not sure if this is Javascript? Any pointers would be appreciated.

[edited by: whoisgregg at 2:29 pm (utc) on Sep. 21, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] :) [/edit]

[whoisgregg]

If your talking about the navigation element where there is a list of top level categories which on mouseover each one reveals a different div with many different links, that doesn't require javascript. Most of these are variations of the "suckerfish dropdowns" CSS tutorial posted a while back. (A search in your favorite search engine for that will bring up many variations of the technique.)

Basically, though, you have markup like this:

<ul id="nav">
<li><a href="#widgets">Widgets</a>
<div>
<p>Put whatever you want here, including links, images, etc.</p>
</div>
</li>
</ul>

And CSS code like so:

li div { display: none; position: absolute; }
li:hover div { display: block; }

So, what happens is that the div is hidden until you mouse over the main heading. Then the <div> appears, with whatever content you've put inside of it.

This example will render pretty horrendously in any browser though... you'll have to do lot's of CSS tweaking to get it right.