How To Create Navigation Bar using CSS

Navigation is very important for any web site. With CSS, you can transform boring HTML menus into good-looking navigation bars. As HTML, navigation bar is a standard list of links, constructed using using the <ul> and <li> elements.

<ul>
 <li><a href="/home.html">Home</a></li>
 <li><a href="/about.html">About</a></li>
 <li><a href="/contact.html">Contact</a></li>
</ul>

First, you have to remove the bullets, margins and padding from the list.

For vertical navigation bar, use display: block and for horizontal navigation bar, use display: inline-block. Displaying the links as block elements makes the whole link area clickable and not just the text. It also allows to specify the width, padding, margin, or height.

1. Vertical Navigation Bar

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

li a {
 display: block;
 color: #000;
 padding: 8px 0 8px 16px;
 text-decoration: none;
}

li a:hover {
 background-color: #555;
 color: white;
}

You can define and add an "active" class to the current link to let the user know which page he or she is on. You can also align text in center (text-align:center) to <li> or <a> to center the links; add the border property to <ul> add a border around the navigation bar.

2. Horizontal Navigation Bar

Horizontal navigation bar can be constructed using inline-block display. You can Right-align links by floating the list items to the right (float:right;). To make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page, you can add position: fixed; to the ul element.

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #666666;
}

li {
 float: left;
}

li a {
 display: inline-block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

li a:hover {
 background-color: #000000;
}

Dropdown Menu

The .dropdown class use position:relative, which is needed when you want the drop down content to be placed right below the button. The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover. 

<style>
/* Style The Dropdown Button */
.dropbtn {
 background-color: #4CAF50;
 color: white;
 padding: 16px;
 font-size: 16px;
 border: none;
 cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
 position: relative;
 display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 160px;
}

/* Links inside the dropdown */
.dropdown-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
 display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
 background-color: #3e8e41;
}
</style>

<div class="dropdown">
 <button class="dropbtn">Dropdown</button>
 <div class="dropdown-content">
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
 </div>
</div>