- Now to begin working on our menus,…let's go into the exercise files,…let's open up the chapter _01,…let's open up 01_01 and let's find…menus.html and let's open this up in a text editor.…Now, in this html file, I have all the necessary html…to create that basic page structure we looked at earlier.…Down here inside of the header element…we have a <nav> element, inside of the <nav> element…I have an unordered list.…We're going to use this unordered list…as the basic structure.…Many people use unordered lists to create menus…because there's a natural hierarchy in nesting bolded lists.…

In our html we have our outer most unordered,…or bulleted list with the list items of 'About Us',…'Products', 'Design Corner' and 'Contact Us'.…We're going to be adding additional unordered lists…inside of some of these list items.…Back in our html file, to create our first…nested bullet list, let's come down inside of the 'About Us'…let's get our cursor after the anchor link but before the…ending list item.…Let's set a return.…Let's get our cursor inside of that break.…

Resume Transcript Auto-Scroll

Author

Released

9/15/2015

Did you know you can add dropdown menus to your webpage with nothing more than HTML and CSS? Typically interactive menus are accomplished with jQuery or another JavaScript framework. But the truth is, with CSS you can create the same rich experience, including full support for iOS and touch-screen Windows devices. In this installment of Design the Web, Chris Converse teaches us how to nest lists, style and position menus, add in ARIA markup for cross-compatibility, and make the menus fully responsive.

The exercise files are free to all members! Download them today to start creating your own multilevel dropdown menus.