Nearly Pure CSS Menus

After using a Javascript-based system to create menus similar to what you find in application menu bars, I found that they are no good. Search engine spiders can't read the menu links because they are generated by the script, and when you include the necessary Javascript, alternative code for those without Javascript and style information, you are left with an extra large amount of code that is useless to search engines and some of your visitors.

I did some research and found a few different methods for pure CSS-driven menu systems like the Suckerfish Dropdowns. However, the sites I was programming at the time needed the full functionality of the menu. I then ran into the Pure CSS Drop Down Menus (well with javacript for ie) page, which looked very promising.

In April of 2005, I had a need to use this menu system, but needed to be able to have multiple levels of menus. The 2.0 code didn't allow for that so I did some more research. During this research cycle, I found a very helpful article over at CSS Creator that had everything I needed. Therefore, I grabbed the Javascript function from there, changed my style definitions slightly and was left with a functioning multi-tiered menu system that is nearly pure CSS. For those of you who want to do the same thing in a vertical format be sure to check out that link!

As with the last version, I left all my comments in the CSS definitions as reference notes that you may find them helpful while implementing and cusomizing. To view the CSS definitions and these comments, simply view the source of this page.

Download code (zip file)

Nearly Pure CSS Drop-down Menu System

The menu system works with pure CSS for all the tested browsers except for Microsoft Internet Explorer. In order to make this work, a little bit of JavaScript is needed. (See source)

As I was getting this onto my site, I did notice that the Javascript code can be omitted if you are using Dean Edward's IE7 (as this site currently does). However, I have left the code in the page for your reference in the event that you do not want to use the IE7 fix.

This is a demonstration page for the use of nearly pure CSS dynamic drop-down menus using list elements with multiple level menu support.

• Item 1.1
  • Item 1.1.1
  • Item 1.1.2
  • Item 1.1.3
• Item 1.2
  • Item 2.1.1
  • Item 2.1.2
  • More options »
    • Item 2.2.1
    • Item 2.2.2
    • More options »
      • Item 3.2.1
      • Item 3.2.2
      • More options »
        • Item 4.2.1
        • Item 4.2.2
• Item 1.3
  • Item 1.3.1
  • Item 1.3.2