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

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

Use CSS to convert a nested unordered list into a multi-level, drop-down, cascading navigation menu. Demo File:…
Video Tutorial Rating: 4 / 5

Don’t forget to check out our other video tutorials or share this video with a friend.

1 Star2 Stars3 Stars4 Stars5 Stars 0 votes
Loading... 3,065 views

20 responses to “Cascading Drop-down Navigation Menu with CSS (Part 1)”

  1. tom perry says:

    Step-by-step instruction on working from Home with Paid Surveys Visit PAIDWORLDSURVEY. COM

  2. Raging Goblin says:

    THIS IS AWESOME!!! thanks!!

    btw, what should i do if i want the cascading buttons to stay fixed in position once activated? I mean i don´t want the sub-menu buttons to disappear after activating the parent item.

  3. AsSudan says:

    Dear Ralph,
    Thank you for taking the time to create a very helpful video. I’m a newbie – question: Given a HTML5 web site of 2 pages (2 html files), each page is to have the identical navigation menu. Does the HTML code (un-ordered list and list item elements) have to be replicated in each html file?

    I realize the styling can all be in one css file. Thanks.

  4. SK ALTAFUDDIN says:

    Thank you so much for this amazing tutorial sir, i was looking for learning this technique to create navigation menu in dropdown…and this is the easiest way to learn…gud job (y)

  5. Ayse Toyran says:

    Hi. Could you explain the difference? I have just written the last background color, border and border radius under ”ul#navmenu li” instead of ”ul#navmenu a”. The result looks similar. Can I use this way too? Or is it wrong?

  6. Ayse Toyran says:

    Best menu tutorial! Cause you tell what those tags and other stuff stand for pretty well!

  7. Abdul Hannan says:

    which version of css are you using i am using css2.1 will it work in that

  8. Kim björkman says:

    Thanks for this! Helped a lot.

    Does anyone know how I can resize the hovereffect for the submenu only, without affecting the parentmenu?

  9. sasikar100 says:

    you are just AWESOME..

  10. rbrickproductions123 says:

    Very nice tutorial! I subbed

  11. ABYA75 says:

    Hi Ralph, thanks for this great tutorial.
    In fact i’am facing the same bug in IE and i would like to know if i can send to you the code to verify it. btw this code is working perfectly in other browsers.

  12. Deborah Horne says:

    ok.that’s creepy

  13. Lord Zeleathos says:

    That doesnt seem to be working for me

  14. Barack Obama says:

    3:47 thats what she said

  15. Barack Obama says:


    if you hate it then why use it…?

  16. Rogeres OLiveira says:

    If my site has 50 pages this internal style will not help.

  17. comercja says:

    Ralph tell my what do You thinking about my tutorials? Thanks for inspiration.

  18. tangolobo says:

    Great Video… really helped me out with some things. Also switched my Notepad++ to blackboard! hehe

  19. dmkye says:

    an you have also earned a subscriber

  20. dmkye says:

    hey thanks I’ve been looking for like an hour for a video that doesn’t use Dreamweaver but can never find one I like to do it with notepad for good practice considering i’m still learning so thank you very much

Leave a Reply

Your email address will not be published.