- Now, we're going to hide the sub menus…and then only show them when somebody rolls their mouse…over the top level elements.…So, let's go back to our CSS file,…and let's hit a few returns after our pseudo-class.…Let's type nav ul ul.…So now we're going to target unordered lists…that are embedded inside of other unordered lists.…Put in our brackets, and the first property…we're going to set is position.…So say, position: absolute.…

Next we'll set a top property to 100%…and then next we'll set the background-color.…And we're going to set this to a semi-transparent green,…so we'll use the rgba color space,…put in our parentheses and a semicolon.…Inside, we're going to set 0 for red, 102 for green,…102 for blue, then a comma, and then .8,…so that it will be 20% transparent or 80% opaque.…With that in place, let's go back to the browser.…

Let's hit reload and now that these submenus are…set with absolute positioning,…the navigation element will now only extend…for the clear floats we put in earlier…to the first level of elements.…

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.