The Perfect Multi Level Accessible CSS Menu

26 February 2015

The Perfect Multi Level Accessible CSS Menu

** Update 26th Feb 2015 

This article has been updated with one important new test: menus are now judged on whether they are responsive. This is a key criterion for modern responsive webistes. There is also a couple of new entries to the list, and a new winner!
I've now published a review of the perfect multi level accessible accordion menu to accompany this review.

What is a CSS Menu?

A CSS menu is one that is built entirely using CSS and HTML without javascript. These generally take the form of unordered lists (using < ul > < li > tags ) . The stylesheets are used to render the list in an attractive way, with hover states on mouseover. Often, these menus are horizontal, although vertical menus are also possible with CSS.

CSS menus benefit from being accessible and search engine friendly. Since they do not rely on javascript, they have good cross platform accessibility and degrade gracefully - ie if a browser does not support the CSS variant, or has javascript and CSS disabled, the links are still perfectly usable.

Recently, I've been looking for a lightweight CSS-based menu to use with our new generation of websites. All websites are built using  a single CMS system which stores each website  as a collection of pages and folders. The application interprets this collection  builds the websites including dynamic url rewriting . The navigation for each website is generated as a series of nested ul li tags in the rendered  HTML. The website itself interprets this html code into a navigation system. A different navigation system is used for each site, and the design of the navigation can be modified by the CSS.

This sounds like a relatively simple task, but there are a number of basic functions that the CSS based menu needs to accomplish. These are:

  • Full Accessbility (cross browser, search engine accessibility, full keyboard accessibility and graceful degredation).
  • Multi-level menu - ie the ability to have submenus up to n levels. These menus are built using nested ul and li tags.
  • All presentation configured  by CSS (no javascript config files for presentation). 
  • Ability to create both vertical and horizontal menu systems using the same code.


Having submenus requires javascript, which is unavoidable if you want to support all current versions of IE , so the decision was made to make the submenus function using jQuery, which is fast becoming the industry standard for dHTML. Even Visual Studio now includes jQuery. It is a very powerful javascript api and relatively easy to use. Other javascript APIs are available and there is a fantastic Javascript API feature comparison table on wikipedia. The main other API considered was Smart GWT (based on Google Web Toolkit ) however this only has partial degredation, and is newer and less commonly used than jQuery, so there are fewer CSS menu systems based on this. Another factor is that there are often other jQuery based elements on the page, so using the same API is preferable if possible.

Having decided on the base criteria and javascript API, the task was then to draw together candidates for the menu and compare features. Trawling through the internet uncovered the following potential candidates:

CSS menu maker - a web based system used to build CSS menus. The system also have a number of templates that include attractive designs for making horizontal, tabbed or vertically based menus. It also includes dreamweaver and wordpress plugins. Note: this is one of the many sites that have officially dropped support for IE6. The site also has a cool online menu generator which you can use for free, although there is only a limited number of templates which support multiple level menus.

Pro Dropdown Menu v3 by Stu Nicholls - Stu Nicholls is a very prolific developer and has quite a few jQuery menu systems showcased on his website, this one was selected from the many available. Check out the link to see more great looking menu systems.

Drop Down Tabs - Dynamic Drive - this is a very lightweight script used to change ul li lists into tabbed navigation. It's very easy to impliment and works on just about any browser you can throw at it. The UL list has to be wrapped in a div, rather than applying a class to the top level tag.

Menu Dynamique  - Developed by a French Web Design company, this menu is really good. The demo has a slight bug in IE6, but that's easily fixed with a CSS hack, as with most IE6 implimentations of CSS menus. The guy who made his menu no longer works for the company, but the code is available to download and do with as you will.

jdMenu Hierarchical Menu  - a great little menu, which sadly no longer seems to be supported. This one has a lot of features including vertical and horizontal support, submenu indicator and partial accessibility (for top level items only).

Accessible Foldout Menu - standards compliant accessible menu using tab and enter keys (but not cursor keys) to access sub menus and fallback CSS option for degredation. Great potential with this one- if it had submenu indicators, it would be very high up in the list.

Chrome CSS dropdown Menu - basic menu, but included because it has options which change the menu hover effects.

Son of Suckerfish - as the name suggests, this is an extension to the suckerfish menu above written by Patrick Griffiths and Dan Webb . It includes all the original suckerfish features and adds support for mulitlevel drop downs. The only slight issue with multilevel support is that you need to specify a class in the li tag to enable submenu indicators. therefore, it loses a point in this aspect.

CSS drop-down menu framework  - great menu system which includes iPhone support (not many menu systems specify this) and support for linear columns in the submenu which is really special. Pure CSS means that it works without javascript in all but IE6. It's only the lack of accessibility and the omission of automatic submenu indicators which let it down.

Smooth Navigational Menu - nice looking menu that has a slide and fade animation on mouseover. you can also add drop shadows on the menu layer. The best feature of this menu is that you can put the contents of the menu in a separate html file, and call it via ajax.

Adi Palaz Accessible Menu  - Another Suckerfish based menu, this combines approaches from two different menu systems into one. It has good cross browser support. Keyboard accessibility using tab and enter work well, sadly no cursor keys navigation, and the submenu indicator is not automatic, otherwise, its a very good menu.

CSS3 Menu Dropdown  - this menu has been included because its one of the new CSS3 based menus. It is actually software based so you build the menu using the software provided which is very handy because of the number of different classes that need to be put in . If you view the menu in a non css3 browser like IE8, it looks the same as any other,but viewed in firefox 3, you can see beautiful rounded corners which are rendered in CSS3 without using any images. The only slight drawback is that you have to add special classes to the li tags to signify whether it's the first item in the list or the last item in the list (the rounded corners are applied differently to the first and last items. Also, submenus are not automatically indicated, which is to be expected on non javascript menus. If you are hardcoding your menu, then this is the best non accessible pure CSS based menu you can get.

Menumatic  - menumatic is actually a mootools 1.2 menu based on the Son of Suckerfish above. It has been included in this list because it is one of the few that use cursor keys for navigation, however in tests using IE8 on the PC, the cursor keys were very buggy and the up and down keys did not work in submenus most of the time. In Firefox, it was a different story, and navigation was beautiful. The example even includes CSS3 rounded styles like the CSS3 Menu Dropdown above. This is a more complete javascript architecture which supports callbacks so you can invoke other javascript on certain events. Perhaps if the menu used the current version 1.3 of mootools, it might work in IE8, as it is, it only gets partial support for full accessiblity.

ADxMenu  - very simple CSS menu system that uses custom JS to circumvent the IE6 issue. Supports drop up as well as drop down menus, and multi level submenus.

Superfish - this is a new addition to the review, and is a strong contender, with support for multi levels, vertical and horizontal, plus integration with other jQuery plugins (like HoverIntent  which can change the way hover states are displayed) and support for drop shadows, its a very interesting prospect. The updated version of this menu includes support for touch devices including IE10 touchscreen.

Smart Menus - Describes itself as 'possibly the most advanced website menu script today' and I have found little evidence to contradict this statement. Smart Menus is a fully featured modern css menu that includes responsive layout support, full keyboard accessibility and provides all the features of the menu even on the free version.

There were plenty more jQuery based CSS menus that did not make it on the list because they do not fulfil enough criteria, or because I didn't have time to search for more, so this is a selection of the closest ones that I've found that fit the requirements.

The table below shows the reported features that the menus include. Please not, I did not really have time to verify cross browser compatibility or all features:

The full list of desirable features are as follow:

  1. jQuery based javascript or (no javascript)
  2. Cross browser : must support IE6+, Firefox 2+, Chrome, Safari 3+ , Opera 9+. Browser hacks are acceptible eg using *html for IE6.
  3. Search Engine Accessble (no links or text served as javascript files).
  4. Simple Keyboard Accessiblity - using tabs and enter.
  5. Full Keyboard Accessibility - using cursor keys, tabs and enter.
  6. Graceful Degredation - must display links and text if CSS and javascript are disabled.
  7. Unlimited levels - supports any level of menu (although unlikely that more than 6 levels will ever be needed).
  8. Option to automatically   add indicator when menu node has submenu attached.
  9. Option to render menu from ul li tags - preferably use ul li tags as default.
  10. All presentation in CSS file - this includes relative positioning of the submenu, or minimum submenu widths.
  11. Can create both vertical and horizontal submenus - this option can be either in the CSS or in the javascript call.
  12. Animated submenu .
  13. Option to control how submenu appears (slide, fade, etc).
  14. Ability to put more than one menu on a page .
  15. **new ** menu has to be responsive and work in different browser widths

 key: Y =yes , N =no, P =partial support (worth 0.5 marks )

Feature number:   1   2   3   4   5   6   7   8   9 10 11 12 13 14 15  Total
CSS menu maker Y N Y N N Y Y N Y N Y N N Y Y 8
Pro Dropdown Menu v3 Y Y Y N N Y Y Y Y Y N N N Y N 9
Drop Down Tabs Y Y Y N N Y N N Y Y N N N Y Y 8
Menu Dynamique Y Y Y N N Y Y N Y Y Y Y P Y Y 11.5
jdMenu Hierarchical Menu Y Y Y P N Y Y Y Y Y Y N N Y N 10.5
Accessible Foldout Menu Y Y Y Y N Y Y N Y Y N N N Y N 9
Chrome CSS dropdown Menu Y Y Y N N Y N N Y Y N N N Y N 7
Son of Suckerfish Y Y Y N N Y Y N Y Y Y N N Y N 9
CSS drop-down menu framework Y Y Y N N Y Y N Y Y Y N N Y N 9
Smooth Navigational Menu Y Y Y N N Y Y Y Y Y Y Y N Y N 11
Adi Palaz Accessible Menu Y Y Y Y N Y Y N Y Y Y N N Y N 10
CSS3 Menu Dropdown Y Y Y N N Y Y N Y Y Y N N Y N 9
Menumatic N Y Y Y P Y Y Y Y Y Y N N Y N 11
ADxMenu N Y Y N N Y Y N Y Y Y N N Y N 8
Superfish Y Y Y Y N Y Y Y Y Y Y Y Y Y N 13
Smart Menus Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y 15 


Finally, after years of searching I've found the holy grail of accessible drop down menu systems. Smart Menus includes everything you need to make an accessible CSS based drop down/flyout navigation system based on jQuery and best of all it's FREE!


Note on UI Usage of Drop Down navigation

There are many UI designers who would argue that the use of multi level drop down/fly out menus are bad design. In many cases, that is correct, and in general having more than one level of CSS menu can be difficult to use. When organising information, it is better to use fewer more generic categories, and to provide clear methods of navigation- preferably, using a single line of links for primary navigation or more creative navigation methods. However, there are times when having multi level menus are useful, and this is one of the many scenarios for which the univeral CSS menu needs to cater for. There are also cases where using tree menus for organising information are better. Tree menus are not considered in this discussion because they are only suitable for vertical menus.