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.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.

Set of stylized links

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 ...

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