Horizontal List-Based Navigation with Color

In the last section, you used the display: block; property to turn the anchor element from an inline element to a block element. Using the display: inline; property, you can make lists operate inline, which means they'll display horizontally (see Example 10-13).

Example 10-13. Markup and CSS for a horizontal list navigation using color effects

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>working with style</title><style type="text/css">body {font: 14px Georgia, Times, serif; color: black; }ul#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;} ...

Get Spring Into HTML and CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.