Cascading Drop-down Navigation Menu with CSS (Part 2)
Why Stack Overflow recommends it
Stack Overflow users link it when they are building or debugging CSS drop-down navigation menus and want a step-by-step walkthrough.
Recommended by 2 people across 2 different months, 2013 to 2018.
What it is
A 21-minute screencast by Ralph Phillips, part two of a series, showing how to use CSS to turn a nested unordered list into a multi-level cascading drop-down navigation menu. It builds on earlier videos covering centering the nav, block display, absolute positioning and z-index.
What people said
Recommends Wes · 2015-08 · Stack Overflow · on “Issue with dropdown sub-menu”
Between all of your tips and help, as well as some assistance from this video [this video] , I managed to successfully get a functioning and styled dropdown menu for the website! Thank you everyone!
Recommends musician888 · 2018-10 · Stack Overflow · on “How do I make a responsive navigation menu?”
I am trying to follow this tutorial [this video] and I can't get the navigation menu to work. I have also watched this tutorial [LINK] where the tutor states that by changing the position to static, one can make it responsive and look neat on a mobile device. I am trying to move my submenu more to the right and have it changed back into position absolute of around 150px but my game menu does not work too well... I also noticed that if I changed the left position to around 200px, then it does work better but this is too far to the left: * { margin: 0px; padding: 0px; } body { font-family: verdana; background-color: #abc; padding: 50px; } h1 { text-align: center; border-bottom: 2px solid #009; marg
Cites TheWelshman · 2013-03 · Stack Overflow · on “CSS Trying to understand Alternate syntax when creating drop down list in CSS and HTML”
I am seeing two different ways of referring to the unordered lists ( <ul> ), list items ( <li> ) and anchors ( <a> ). I want to set the attributes of these items in a drop down list with at least two levels of nested <ul> . My question is specifically about the ways to refer to the different levels of <ul> , <li> and <a> there in. I have named the navigation bar id="navBar" . I have seen on youtube: Building a drop down navigation bar [this video] The syntax used is: ul#navBar .sub1 li ul#navBar .sub1 li a Where the class " .sub1 " has been defined, and is the first level of nested <ul> , and " .sub2 " is the second level of nested <ul> . Referencing these levels, the code used is. ul#navBar .sub