I needed some code to drive a drop-down menu for my ZenPhoto portfolio site (which is in serious development at the moment). I’d dabbled around on a few sites, but none of them did exactly what I was after.

So this is just a thank-you to the Javascript Array site for their jQuery Simple Drop-Down Menu Plugin. This needs the jQuery library, but that’s on all my pages anyway. A bit of CSS and it did the job fine, integrating with the Menu Manager plugin.

The main problem I had (with this and other solutions) was that the menu wasn’t hiding any objects which fell “behind” the menu items – which rendered the menus unselectable. Upping the z-index to 100 gave the sub-list a higher priority. Here’s the extra code, which = of course – goes in your css file.

[code lang="css"]
#jsddm li ul { 
 z-index:100;
}[/code]