Having easy-to-use navigation is important for any web site.With CSS you can transform boring HTML menus into good-looking navigation bars.A navigation bar needs standard HTML as a base.In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:
Add an "active" class to the current link to let the user know which page he/she is on:
Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you also want
borders inside the navbar, add a border-bottom to all <li> elements, except for the
last one:
Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:
Add an "active" class to the current link to let the user know which page he/she is on:
How to add a dropdown menu inside a navigation bar.