O'Reilly logo

CSS Cookbook by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

3.8. Building Horizontal Menus

Problem

You want to create a horizontal navigation menu out of an ordered set of links; Figure 3-8 shows the default, and Figure 3-9 shows what you want.

The default appearance of the links

Figure 3-8. The default appearance of the links

The tab-based navigation

Figure 3-9. The tab-based navigation

Solution

First create a properly constructed set of unordered links:

 <div id="navsite">
 <h5>Site navigation:</h5>
 <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li> 
  <li><a href="/archives/">Archives</a></li>
  <li><a href="/writing/">Writing</a></li>
  <li><a href="/speaking/" id="current">Speaking</a></li> 
  <li><a href="/contact/">Contact</a></li>
 </ul>
</div>

Then set the CSS rules for the navigation structure, making sure to set the display property of the list item to inline:

#navsite h5 { display: none; } #navsite ul { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navsite ul li { list-style: none; margin: 0; display: inline; } #navsite ul li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navsite ul li a:link { color: #448; } #navsite ul li a:visited { color: #667; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover { color: #000; background: #AAE; border-color: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required