CSS Cookbook

3.6. Creating Nongraphical Menus with Rollovers

Problem

You have a list of links, but want to build an elegant menu as in Figure 3-5.

Figure 3-5. Set of stylized links

Solution

First, mark up the list of links in an unordered list so that they wrap around a div element with an id attribute:

<div id="navsite">
 <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/">Speaking</a></li>
  <li><a href="/contact/">Contact</a></li>
 </ul>
</div>

Next, use the border property on the anchor elements to create the bulk of the design:

#navsite p { display: none; } #navsite { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 0.7em; font-weight: bold; width: 12em; border-right: 1px solid #666; padding: 0; margin-bottom: 1em; background-color: #9cc; color: #333; } #navsite ul { list-style: none; margin: 0; padding: 0; } #navsite ul li { margin: 0; border-top: 1px solid #003; } #navsite ul li a { display: block; padding: 2px 2px 2px 0.5em; border-left: 10px solid #369; border-right: 1px solid #69c; border-bottom: 1px solid #369; background-color: #036; color: #fff; text-decoration: none; width: 100%; } html>body #navsite ul li a { width: auto; } #navsite ul li a:hover { border-left: 10px solid #036; border-right: 1px solid #69c; border-bottom: 1px ...