We can design our navigation bar using a variety of methods, but using a list element is by far the most flexible tool to use.
Start with an HTML List
The base of our navigation bar is an HTML list, specifically an unordered list. Here is an example: Without specifying any CSS, we have a simple list of items.
HomeProductsAboutContact
Apply CSS Styling
We can start by applying values to padding, margin, width, and list-style. This will ensure that we can get a consistent look across modern browsers. Next, we need to style the list items. List items are normally block level elements. Since we are implementing a vertical navigation bar, we want them to display inline instead. For the links, we will remove the standard, default underline, add some padding, apply a background color, and white text color. We will also specify a width for each link. Finally, float the items to the left. Our navigation bar is almost complete. We will put some finishing touches such as centering the text, adding a border between the menu items, and creating a hover effect. With a few minor changes, you can create a variety of different navigation bars for your web projects.
