title: make a pop up navigation menu
body: <p>I've got a pretty easy one but I just can't seem to get it.  I am a student in a basic HTML and CSS class and I've got an assignment due tomorrow but I can't get my navigation up to spec.</p>
  
  <p>It is supposed to look and pop up like this:</p>
  
  <p><a href="http://ista230.com/images/assignments/7/page1.jpg" rel="nofollow">http://ista230.com/images/assignments/7/page1.jpg</a></p>
  
  <p><a href="http://ista230.com/images/assignments/7/page2.jpg" rel="nofollow">http://ista230.com/images/assignments/7/page2.jpg</a></p>
  
  <p>Right now I am just trying to get the divs to pop up but I am getting stuck.  At first I was using an ul for my nav links but I saw some other examples using divs.  So thats where I am at.</p>
  
  <p>Heres the HTML for the nav:</p>
  
  <pre><code>&lt;nav id="nav"&gt;
         &lt;a href="#"&gt;&lt;div class="navItem"&gt;Home&lt;/div&gt;&lt;/a&gt;
         &lt;a href="#"&gt;&lt;div class="navItem"&gt;Upcoming Flights&lt;/div&gt;&lt;/a&gt;
         &lt;a href="#"&gt;&lt;div class="navItem"&gt;About Us&lt;/div&gt;&lt;/a&gt;
         &lt;a href="#"&gt;&lt;div class="navItem"&gt;Travel Guide&lt;/div&gt;&lt;/a&gt;
         &lt;a href="#"&gt;&lt;div class="navItem"&gt;Contact Us!&lt;/div&gt;&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And here is what I have so far for CSS:</p>
  
  <pre><code>/* Navigation */
  nav{
      margin-left:5%;
      margin-right:5%;
      margin-bottom:5%;
      margin-top:10%;
      width:100%;
  }
  
  #nav a{
      text-decoration:none;
      color:black;
  }
  
  div.navItem
  {
  
      list-style:none;
      padding:2% 4%;
      display:inline;
      background-color:orange;
      border:5px solid #597CBB;
      border-radius:10px;
  }
  .navItem div{
  
      -moz-transition: height 1s ease; /* Firefox 4 */
      -webkit-transition: height 1s ease; /* Safari and Chrome */
      -o-transition: height 1s ease; /* Opera */
      -ms-transition: height 1s ease; /* IE9 (maybe) */
      transition:height 1s ease;
  
  }
  
  .navItem:hover div
  {
      height:500px;
  }
  </code></pre>