How to create a Navigation Bar?
Having easy-to-use navigation is very important for any website. Today you can learn how to create a top navigation bar with CSS.
With CSS you can transform boring HTML menus into good looking navigation bars. The navigation bar can be vertical, or horizontal.
A navigation bar needs standard HTML as a base. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense (you can review your knowledge about HTML list tags here.)
Step 1: Add HTML
Step 2: Add CSS
To built a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code from 1st step:
You can create a basic vertical navigation bar with a gray background color of the links when the user moves the mouse over them: