Time for action – building a fancy navigation bar

Let's take a look at how we can use custom-designed tooltips to add a little progressively enhanced punch to a basic navigation bar. We'll continue working with the files we've set up in the last two custom tooltips examples. Perform the following steps:

1. Let's get started by adding a navigation bar to the top of our HTML page. While we're at it, let's go ahead and also add a header to the top of the page:

   <header class="content">
     <h1>Pittsburgh, Pennsylvania</h1>
     <p>City of Bridges, Steel City, City of Champions, The 'Burgh</p>
   </header>  
   
   <nav>
     <ul>
       <li><a href="#pb-gallery" title="View photos of Pittsburgh">Photo Gallery</a></li>
       <li><a href="#pb-about" title="Read about Pittsburgh">About</a></li>
       <li><a href="#pb-geography" title="Learn about Pittsburg's geography">Geography</a></li>
       <li><...