MenusLesson 24Free preview

Vertical Menu

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of Vertical Menus using pure HTML and CSS. This component assembles a row of navigation buttons stacked from top to bottom in an elegant box container, perfect for navigating book chapters or sub-menu sidebar.

Key points

Determine the width of the vertical menu container (e.g.: width: 200px)
Adjust links with display: block to fill the full width of the container
Embed the line of separation between the items using the border-bottom
Apply active status classes and interactive hover style highlights

Full lesson

Code examples and quizzes

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