MenusLesson 40Free preview

Dropdown in Topnav

This lesson is part of How To · All levels

Summary

This lesson reviews the integration of the Dropdown menu in Topnav. This component combines horizontal standard links with a neatly layered sub-category menu under one integrated navigation bar.

Key points

Insert the <div class="dropdown"> element between the horizontal links on the navbar
Adjust the trigger button to have height, padding, and font alignment with regular links (.dropbtn)
Apply position: absolute to .dropdown-content just below the navbar bar
Insert the bottom arrow icon (such as the caret) as a visual indication of the presence of sub-menus (<i class="fa fa-caret-down">) (</i>)

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.