Previous Article Next Article Cascading Drop-down Navigation Menu with CSS (Part 1)
Posted in Css

Cascading Drop-down Navigation Menu with CSS (Part 1)

Cascading Drop-down Navigation Menu with CSS (Part 1) Posted on May 17, 201829 Comments

Use CSS to convert a nested unordered list into a multi-level, drop-down, cascading navigation menu.

Centered navigation bar
Demo File:

Fixed header navigation at top of page.
Demo File:

Center the Nav Menu:

Block vs No-Block:

Position Absolute:

Z-index when Positioning:


  1. Sir, when i am using another div just below to this navigation bar and in this div i paste some picture. Now when i hover the mouse over shop, account they display nested list but the problem is my below div gets displaced when nested list opens

  2. Ralph, if all your videos are this well explained, you really deserve a lot more views and all the money that comes with it. I don't know why all your other videos aren't getting more love. Maybe the thumbnails aren't snazzy enough or some of the titles a bit too long? I don't know, but this was a quality lesson and more people need to be watching your vids.

  3. Hi This might be a minor problem but its driving me mad. When I put in the reset rule the bullet points disappear. Ive tried this on a completely blank page in case any other css interfered with it and on the site I'm working on. Ive checked the html list tags a hundred times. its definitely only when i put the reset rule in. I need to get this sorted for a project soonas. Thanks J.

  4. Hi Ralph,
    You made an excellent video! I was wondering if you can make a tutorial video how to post multiple articles on one webpage as a link in html? converting word documents to webpage does not work because it will open another page and the head and other parts of Css disappear. Thanks for the tutorial video!

Leave a Reply

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