Navigation Menu with Accordion Drop-down Sub Menu

Create a horizontal navigation menu with an accordion-style drop down effect for the sub menus.

[no_short_circuit]

Thanks again Prof for all these navigation tutorials, very easy to follow and all produce a very modern look to navigation.

[Aravamudhan]

If any one of you wondering the purpose of z-index here is the link to check about it.

Here are the basic rules to determine stacking order(from back to front):
1. The stacking context’s root element
2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
3. Non-positioned elements (ordered by appearance in the HTML)
4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

[edessamediagroup]

Great tutorial bravo! do you have one for vertical menu?

[wolenyo]

Really great tutorials, Ralph. Thanks!! It would be good to see how to use this on a real 2-column page layout that has a header, a left nav bar and a main page. I tried to do that, but transitions only work when I leave out z-index: -1, with sub menu sitting on top of the main menu.

[MrDeeva]

Your tutorials are awesome! On this one, i followed through all the way, but i have one question. Why did we put a padding-top of 4px on the .sub-menu class?