Build Multi-level Multi-column Multi Menus with pure CSS

I am sure there are many designers and developers who likes to implement the Multi-level, Multi-Column, Multi-Menus, Light Weight and the most Browser Compatible Menu or Navigation with pure css and without using any javascript.

What is this Multi-Menus? :)
Don’t worry its not a new term – you can implement Multiple Menus by using the same CSS by just having different class names for changing the colors and the height of the other menus.

I am one among them, who searched a lot to get the proper and pure css multi-level, multi-column and multiple menus – but failed to get the proper menu and thought why not explore a little with my little css knowledge I have. So started exploring the best way to implement menu with only CSS. And here is the result of it, this menu works well in all the latest browsers.

Multi-level Multi-column Multi Menus with pure css
Multi-level Multi-column Multi Menus with pure css

Tested and works perfectly in the following latest browsers – Firefox, Google Chrome, Safari, Opera, Internet Explorer and among the most, it works excellent with IE 6 :). Few call it is with IE 6 Hack, but its not – this method is by using Conditional Comments.

The best features of this menu is:

  • Pure CSS (Only CSS)
  • Multi-Level
  • Multi-Column
  • Multiple Menus in Single Page :)
  • HTML List based
  • Supports all the latest browsers
  • Supports IE6 with Conditional Comments
  • Browser Compatible
  • Light Weight
  • and the most is Flexibility – Can be work for 3 or more level – just need small tweaks in CSS :)

Let me Explain how I made it compatible to IE 6, but I am not gonna paste the whole CSS code over here, as some are scared to see the huge code, its not a huge code though, just see the result folks :) and don’t forget to spread it if you like it, because this will be helpful for many of your friends out there.

If you check the View Source of the Demo, you observe some comments like:
<!–[if lte IE 6]> and ending with <![endif]–>

Some call it as a IE 6 Hack, its by using the Conditional Comments, you can get a complete over view of the Conditional Comments at MSDN – Internet Explorer Developer Center

And the Conditional Comment types I have used in this example are Downlevel-Hidden
<!–[if lte IE 6]><![endif]–>

and Downlevel-Revealed
<![if gt IE 6]><![endif]>

You might be thinking what is this lte and gt?
Those are Operators which can be used to create conditional expressions. You can check the available Operators at MSDN – Internet Explorer Developer Center, observe the table which describes the list of operators that can be used to create conditional expressions. Check the examples in the same page for getting an idea of the same.

The Operators I have used are:
lte = The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt = The greater-than operator. Returns true if the first argument is greater than the second argument.

That’s it Check the Demo, Download and Explore yourself :)

demodownload

And now this gonna be a part of our WittySparks CSS Framework

Kindly share your ideas to improve it more….

Before people use to say Digg It – now its fashion to say Tweet It :) – But I say Spread iT and show some love :)

Published by Sravan Kumar

A Creative Web Designer, Developer, User Interface and User Experience Expert.

Join the Conversation

44 Comments

  1. Pingback: designfloat.com
  2. Pingback: devmarks.com
  3. Pingback: zabox.net
  4. Pingback: Graphic Design Links and Tutorials
  5. Thank you so much! I was looking for something like this since I first saw a “Mega Menu” article in SitePoint Magazine.

  6. Pingback: pligg.com
  7. Pingback: Build your own Firefox like Multi Search Box for your site - WittySparks
  8. Hey, that’s a great menu, thanks.
    i’m only new to CSS and just downloaded, and wondering is there any chance this can be made pop up?

  9. Pingback: 50+ Fresh CSS Techniques, Tutorials and Resources | Graphic Design Pro
  10. Pingback: 50+ Fresh CSS Techniques, Tutorials and Resources | Theme Center
  11. Pingback: 50+ Fresh CSS Techniques, Tutorials and Resources | Gacik Design Blog
  12. Pingback: 50+ Fresh CSS Techniques, Tutorials and Resources | Design-Tut+
  13. Pingback: 25+ Tutoriais CSS e jQuery, Recursos e Técnicas
  14. Pingback: 50+ Fresh CSS Techniques, Tutorials and Resources « Oviyas Blog
  15. Pingback: A Trend of Multi Column Mega Drop-down Menus with 30 examples! - WittySparks
  16. Loved the post.
    I am taking the liberty of adding a reference to your article on my CSS aggregator site. Do let me know if you are ok with this.

  17. Great Job!!
    I have one problem. It sucks when I use it for right side menu. It flows out of the visible area.

    Is there any solution for this?

    1. @WebCreations – would be great if you can share the link where you are trying to implement this – would try our best to solve this…..

  18. This is an awesome solution. Especially with IE 6 support (why people still use it is puzzling). I’m wondering if you have a way to manually wrap columns instead of relying on automatic wrapping.

  19. Hai, this is cool css code, but, have some bugs, how about my text have a long wording, the text are on a top another menus.. can this fix..

  20. Pingback: 50+ Fresh CSS Techniques, Tutorials and Resources
  21. Pingback: 50+ Most Wanted CSS Techniques, Tutorials and Resources | Webwibe
  22. love this — but in HTML5 DOCTYPE,the BBedit syntax checker doesn’t like the Downlevel-revealed Conditional Comments (which parse fine in XHTML strict). The error is ” Unexpected SGML declaration; check for misspelled DOCTYPE or malformed comment.” probably not a problem… but maybe in some browsers?

  23. Pingback: Around 50 Fresh Great CSS Techniques - Tuts and Resources
  24. Pingback: 10 Must Know CSS and CSS3 Resources and Tools | jQuery4u
  25. Pingback: 15 Best CSS Tutorials to Enhance Web Design Skills | Sky Tech Geek
  26.  My life dream to become a css designer.. it’s been so many years already, I think oneday it will happen this, if I still keep the faith, of course.

  27. Pingback: 109 Awesome CSS3 Tutorials & Resources | Internet Web Hosting Blog
  28. Pingback: 40 Eventual Throng of CSS3 Techniques and Tutorials | Dzinepress
Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Thank you for sharing the article across social media. You can follow us in these paltforms to receive latest updates from WittySparks.

Send this to a friend