This page is a demo of a classic Tab bar using CSS. The code if fairly straightforward. However, this is no a responsive design as the tabs do no look good when the viewing area is shrunk.
Sample
Here is what it looks like with 6 tabs.
Source Code
Here is the source code with a link to downloadable text.
9 <div id="TaskBarDemo">
10 <style>
11 #NavList{ padding:1em 1em 0em 1em; margin:0; font-family: Verdana, Arial, sans-serif; font-weight: normal; font-size: 1.2em; }
12 #NavList ul{ margin:0; padding:1em 1em 0.2em 1em; background-color:white;}
13 #NavList li{ list-style: none; display:inline; padding:0; }
14 #NavList li a{ padding:0.2em; margin:0; margin-left:0.2em; border: 2px solid black; border-bottom:none; background:lightgray; text-decoration: none; color:black; }
15 #NavList li a:link { color:black; }
16 #NavList li a:visited { color:black; }
17 #NavList li a:hover { background:#EAEAEA; text-decoration: underline; cursor:pointer; }
18 #NavList li a#current{ background: white;}
19 </style>
20
21 <div id="NavList">
22 <ul>
23 <li><a href="#Tab1">Tab1</a></li>
24 <li><a href="#Tab2">Tab 2</a></li>
25 <li><a href="#Tab3">Tab 3</a></li>
26 <li><a href="#Tab4">Tab 4</a></li>
27 <li><a href="#Tab5">Tab 5</a></li>
28 <li><a href="#Tab6">Tab 6</a></li>
29 </ul>
30 </div>
31
32 </div>