When it comes to dropdown menus, there are a lot of different coding techniques. Some rely on pure javascript, most on a mixed javascript+CSS approach. To our knowledge, very few utilize the pure CSS methodology, which primarely consist of leveraging original CSS attributes of standard HTML elements.

The snippet we're presenting today, PVII CSS Express Drop-Down Menus from ProjectSeven, uses the "pure CSS" way to implement an easy-to-use and easy-to-setup dropdown menu, by reusing the hover pseudoclass and the li tag to hide and show the menu elements without JavaScript. Sounds great in theory, but in practice it's not so pure. Browsers used by the vast majority of humans do not support this technique and must be served a small script to simulate li:hover. That said, the piece of code is less than 1K and doesn't conflict with any of the standard frameworks.

An example of PVII Menu System

Setting up the necessary code is child's play: download the little .zip archive from their website, extract the content and move the .js and the .css files to your preferred location into your website structure. Link into the <head> section and add a small conditional markup for IE browsers 6 and before, initialize the script with a <body onload ... > or an event.observe, et voil� ! You're ready to go.

The rest is pure hassle-free: just build your menu structure by imbricating <ul> and <li> tags with the proper class definitions. It's really, really simple! And since it's pure CSS, it's very easy to customize, just as we did for one of our customers: textured background and alpha transparency, anyone ?

This is how we implemented the P7VII Menu System for one of our customers
See this live on http://www.lelizabeth.be.

What else to say? You can also imbricate multiple levels and sublevels of menu items, and browser support includes (but is not limited to) IE5+, Opera 8+, Safari 1.2+, Firefox 1+ and Mozilla/Gecko 1+.

» Download PVII Menu System