Laying the Groundwork

The first thing to consider is the way the document is structured. In this case, there are three major components to the document:

• The page's title

• The navigation links

• The main content of the page

As the ordering of the bullet points suggests, the navigation links are contained in a div that comes after the h1 that contains the page title but before the main div that holds the text content of the page. The file already has some basic styles, which are shown in Listing 6.1 and illustrated by Figure 6.1.

Listing 6.1. The Basic Styles

 <style type="text/css"> body {background: #EEE; color: #000;} h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%;   border-left: 1px solid;} div#nav {float: left; width: 7em;   background: #FDD;} </style> 

Figure 6.1. Our starting point, with the basic styles already applied.

The point of these basic styles is to get the page laid out properly and to visually de-emphasize the text so that it doesn't distract us while we work on the menu system. The light red background for the menu div is there solely to let us see where the navigation div is laid out. Speaking of menus, the markup that creates them is given in Listing 6.2.

Listing 6.2. The Navigation Menu Markup

 <div > <ul>  <li><a href="/">Home</a></li>  <li><a href="/services/">Services</a>   <ul>    <li><a href="/services/strategy/">Strategy</a></li>    <li><a href="/services/optimize/">Optimization</a></li>    <li><a href="/services/guidance/">Guidance</a></li>    <li><a href="/services/training/">Training</a></li>   </ul>  </li>  <li><a href="/events/">Events</a></li>  <li><a href="/pubs/">Publications</a>   <ul>    <li><a href="/pubs/articles/">Articles</a></li>    <li><a href="/pubs/tuts/">Tutorials</a>     <ul>      <li><a href="/pubs/tuts/html/">HTML</a></li>      <li><a href="/pubs/tuts/css/">CSS</a>      <li><a href="/pubs/tuts/svg/">SVG</a>      <li><a href="/pubs/tuts/xml/">XML</a>     </ul>    </li>    <li><a href="/pubs/wpapers/">White Papers</a></li>    <li><a href="/pubs/comment/">Commentary</a></li>   </ul>  </li>  <li><a href="/contact/">Contact</a></li> </ul> </div> 

nav Naming

You may be wondering why we're referring to the navigation div as div#nav instead of just #nav. This is being done to avoid a bug in IE/Win: It won't dynamically show the submenus if the selectors just use #nav. We don't know why, exactly, adding the element name to the selector fixes this bug, but it does.

That's right it's some nested, unordered lists containing links and nothing more. This is almost all that we'll need. As we get further into the project, we'll add a few classes to the markup to make the menu system work, but that's all.

Proper Nesting

Note that each nested list is inside a list item from its parent list; for example, the list item for Services contains a link, a nested list, and then the </li> appears. This is correct because lists cannot be children of lists, but they can be children of list items. A very common mistake is to place a nested list between list items instead of inside one of them.