Creating a horizontal navigation bar (menu) with HTML & CSS

Web Design with HTML & CSS

🕑 This lesson will take about 10 minutes

In this lesson, you will learn how to add a horizontal navigation bar (menu) with buttons to a webpage using HTML and CSS code. The menu will look like the one shown below (with buttons changing colour when the mouse hovers over), but you can customise the font, colours, etc.

Animated image of a horizontal layout navigation bar/menu with buttons that change background colour when mouse hovers over.

Please watch the video below and then scroll down to view the sample code.

Here is the sample HTML and CSS code: