• Skip to primary navigation
  • Skip to main content
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
WittySparks / Technology / Programming / Build Multi-level Multi-column Multi Menus with pure CSS
Multi-level Multi-column Multi Menus with pure css

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

Programming September 21, 2009 by Sravan Kumar Kandagatla

I am sure there are many designers and developers who like 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 it’s not a new term – you can implement Multiple Menus by using the same CSS by just having different class names for changing the colours 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 a menu with only CSS. And here is the result of it, this menu works well in all the latest browsers.

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 it’s not – this method is by using Conditional Comments.

The best features of this menu are:

  • 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 with IE 6, but I am not gonna paste the whole CSS code over here, as some are scared to see the huge code, it’s 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 an IE 6 Hack, it’s by using the Conditional Comments, you can get a complete overview 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 on 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 :)

download

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 :)

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • 18 Free Open Source CSS Dropdown Navigation Menus
  • CSS Front-end Responsive Frameworks and Grids Compared
  • Giveaway: 3 Jumpeye Framework Licenses for responsive websites
Launch Offer
Rocket.net - Managed WordPress hosting
Rocket.net - Managed WordPress hosting
$1 for first month, $25/month

A highly secured WordPress hosting platform powered by Cloudflare enterprises with customized services for agencies, eCommerce, and small businesses.

  • PageSpeed Guarantee
  • Ultra Secure Platform
  • FREE Migrations
  • Automatic Updates
Try for $1.00 Our Review
We earn a commission if you make a purchase, at no additional cost to you.

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Semrush - SEO and Marketing Tools
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Semrush - SEO and Marketing Tools
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « How to tackle Hyderabad Traffic? – Part I
Next Post: Videocon India Youth Icon Awards 2009 »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for Alex FluerasAlex Flueras says

    September 22, 2009 at 9:39 am

    Thank you so much! I was looking for something like this since I first saw a “Mega Menu” article in SitePoint Magazine.

  2. Profile picture for ThureinThurein says

    October 6, 2009 at 9:53 am

    great tutorial. thanks

  3. Profile picture for EricaErica says

    November 6, 2009 at 2:54 pm

    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?

  4. Profile picture for GuadalupeGuadalupe says

    November 26, 2009 at 4:56 am

    no puedo bajarlo.. :(

  5. Profile picture for Graphic, Web, Blog Design | BrandleDesignGraphic, Web, Blog Design | BrandleDesign says

    December 3, 2009 at 11:34 pm

    Thanks for the advice. Great tutorial.

  6. Profile picture for tomtom says

    January 27, 2010 at 7:54 pm

    Any chance of developing this for Joomla?

  7. Profile picture for xRommelxxRommelx says

    February 25, 2010 at 6:31 pm

    thank you mae, in this momento this is very useful for me :)

  8. Profile picture for BobinBobin says

    April 12, 2010 at 1:32 pm

    wow! man you rock,

  9. Profile picture for harryharry says

    April 22, 2010 at 10:02 pm

    Well done this will come in handy for a few future projects

  10. Profile picture for netbaazigarnetbaazigar says

    May 19, 2010 at 11:28 pm

    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.

    • Profile picture for adminadmin says

      May 19, 2010 at 11:48 pm

      @netbaazigar – Thanks and sure please go-ahead and add it to your CSS aggregator.

  11. Profile picture for web Creationsweb Creations says

    June 6, 2010 at 9:13 am

    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?

    • Profile picture for adminadmin says

      June 7, 2010 at 11:44 pm

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

  12. Profile picture for BrianBrian says

    August 17, 2010 at 12:35 am

    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.

  13. Profile picture for AldoAldo says

    September 27, 2010 at 5:21 pm

    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..

  14. Profile picture for download drupal themesdownload drupal themes says

    December 2, 2010 at 7:54 am

    This is a great menu and it helped me a lot for designing my site .

  15. Profile picture for JTJT says

    February 27, 2011 at 8:52 pm

    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?

  16. Profile picture for AdsalfAdsalf says

    February 3, 2012 at 8:00 am

    this is great. I am looking for this. Thanks a lot

  17. Profile picture for fragrancefragrance says

    April 15, 2012 at 7:15 pm

     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.

  18. Profile picture for Walera SyschukWalera Syschuk says

    June 27, 2012 at 7:49 pm

    excelent menu! thank you very much

  19. Profile picture for gr8webdivagr8webdiva says

    March 16, 2013 at 3:46 am

    Nice functionality, but needs to be responsive.

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure