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

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