O'Reilly logo

CSS Cookbook, 3rd Edition 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

Building Horizontal Navigation Menus

Problem

You want to create a horizontal navigation menu out of an unordered set of links; Figure 7-13 shows the default.

The default appearance of the links

Figure 7-13. The default appearance of the links

Solution

First, create a properly constructed set of unordered links:

 <div id="navsite" class="clearfix">
 <p>Site navigation:</p>
 <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 adjust the list items to float, as shown in Figure 7-14:

#navsite p {
 display: none;
}
#navsite ul {
    width: 100%;
    float: left;
 padding: 0;
 margin-left: 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
}
#navsite ul li {
 list-style: none;
 margin: 0;
 float: left;
} #navsite ul li a { padding: 12px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background-color: #666; text-decoration: none; background-image: url(title-glass.png); background-position: 50%; background-repeat: repeat-x; display: block; width: 7em; } #navsite ul li a:link { color: white; } #navsite ul li a:visited { color: #667; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover { color: #000; background-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