title: Trying to add Dropdown to menu
body: <p>I'm trying to add a dropdown to a template i downloaded, but i'm not the greatest with CSS when it comes to existing templates.  </p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>    &lt;header&gt;
    &lt;div class="main"&gt;
      &lt;div class="wrapper"&gt;
        &lt;h1&gt;&lt;a href="index.html"&gt;KB Customs&lt;/a&gt;&lt;/h1&gt;
        &lt;div class="fright"&gt;
        &lt;div class="indent"&gt; &lt;span class="address"&gt;MI 49544&lt;/span&gt; &lt;span class="phone"&gt;Tel: 174&lt;/span&gt; &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;nav&gt;
        &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="maintenance.html"&gt;Products &lt;/a&gt;&lt;/li&gt;
  
            &lt;!-- Insert 5 drop downs here -------------------------&gt;
  
          &lt;li&gt;&lt;a href="repair.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="price.html"&gt;FAQ &amp; Prices&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="locations.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div class="slider-wrapper"&gt;
        &lt;div class="slider"&gt;
          &lt;ul class="items"&gt;
            &lt;li&gt; &lt;img src="images/slider-img1.jpg" alt="" /&gt; &lt;/li&gt;
            &lt;li&gt; &lt;img src="images/slider-img2.jpg" alt="" /&gt; &lt;/li&gt;
            &lt;li&gt; &lt;img src="images/slider-img3.jpg" alt="" /&gt; &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;a class="prev" href="#"&gt;prev&lt;/a&gt; &lt;a class="next" href="#"&gt;next&lt;/a&gt; &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS that is currently there:</strong></p>
  
  <pre><code>/***** menu *****/
  header nav {
  width:100%;
  height:52px;
  background:url(../images/menu-bg.jpg) 0 0 no-repeat;
  overflow:hidden;
  }
  
  #page1 header nav {
  margin-bottom:28px;
  }
  
  .menu li {
  float:left;
  position:relative;
  background:url(../images/menu-spacer.gif) left top no-repeat;
  }
  
  .menu &gt; li:first-child {
  background:none;
  }
  
  .menu li a {
  display:inline-block;
  font-size:18px;
  line-height:25px;
  padding:12px 28px 12px 29px;
  color:#808080;
  text-transform:capitalize;
  }
  
   .menu &gt; li:first-child &gt; a {
  text-indent:-999em;
  background:url(../images/menu-home.png) center -25px no-repeat;
  min-width:22px;
  }
  
   .menu li a.active, .menu &gt; li &gt; a:hover {
  color:#fff;
  }
  
   .menu &gt; li:first-child &gt; a.active, .menu &gt; li:first-child &gt; a:hover {
  background-position:center 15px;
   }
  </code></pre>
  
  <p>My main issue with css like this is that i don't know the difference between # and . also what > does.</p>
  
  <p>Sorry if i sound like a noob, been away from CSS for a while. </p>
  
  <p><strong>EDIT:</strong> I appreciate the explanation of what all that means, but can someone help me in achieving my goal? :)</p>