Pure CSS Navigation Bar with No Image Files or JavaScript

A navigation bar styled purely with CSS is easier to modify and reuse than one dependent on image files or JavaScript.

Pure CSS Navigation Bar

HTML for a navigation bar (a flat menu bar also called a nav bar or link bar) should contain just the list of buttons with their respective links.

<ul class=navigation-bar>
   <li><a href="#a">Alligator</a></li>
   <li><a href="#b">Bullfrog</a></li>
   <li class=current><a href="#c">Cheetah</a></li>
   <li><a href="#d">Dolphin</a></li>
</ul>

Example Navigation Bar HTML

Pure CSS Navigation Bar uses CSS to layout the buttons horizontally by disabling list-style-type and displaying the list items as table-cell elements.

ul.navigation-bar {
   list-style-type: none;
   background-image: -webkit-linear-gradient(top, silver, midnightblue);
   background-image:    -moz-linear-gradient(top, silver, midnightblue);
   background-image:     -ms-linear-gradient(top, silver, midnightblue);
   background-image:         linear-gradient(top, silver, midnightblue);
   border: 2px solid dimgray;
   padding: 0px;
   margin: 0px;
   background-color: midnightblue; /* IE6...IE9 */
   *line-height: 3.2em; /* IE6,IE7 */
   }
ul.navigation-bar li {
   display: table-cell;
   *display: inline; /* IE6,IE7 */
   }
ul.navigation-bar li.current, ul.navigation-bar li:hover {
   background-color: rgba(255, 255, 255, 0.2);
   }
ul.navigation-bar li a {
   display: table-cell;
   text-decoration: none;
   outline: none;
   font-size: 120%;
   color: white;
   border-right: 2px solid dimgray;
   padding: 15px 25px; /* sets button size */
   }

Pure CSS Navigation Bar

Try it out:

Pure CSS Navigation Bar in Action

The color for the navigation bar in the example screenshot is midnightblue.  Other professional looking colors for the navigation bar include firebrick, seagreen, sienna, darkslategray, and dimgray.

Pure CSS Navigation Bar will work on sites that validate to strict HTML or HTML5.  And it follows a progressive enhancement strategy in that the navigation bar will display and function correctly for most all web browsers while providing improved visual effects for standards compliant web browsers.