O'Reilly logo

Sams Teach Yourself CSS in 10 Minutes by Russ Weakley

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

Chapter 15. Creating Vertical Navigation

In this lesson, you will learn how to create vertical navigation. You will also learn how to apply background images and hover effects.

Why Use a List?

At its most basic level, site navigation is simply a list of links to other pages in the site. So, a standard HTML list is the ideal starting point (see Listing 15.1). The resulting list is shown in Figure 15.1.

Example 15.1. HTML Code Containing the Markup for a List

<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Staff</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Sitemap</a></li>
</ul>

Figure 15.1. Screenshot of unstyled list. ...

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