title: My HTML + CSS drop-down menu does not appear when hovering
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* FONTS */
  @font-face {
      font-family:'MontserratNormal';
      src:url(../fonts/montserrat-regular-webfont.eot);
      src:url(../fonts/montserrat-regular-webfont.eot#iefix) format("embedded-opentype"),url(../fonts/montserrat-regular-webfont.woff) format("woff"),url(../fonts/montserrat-regular-webfont.ttf) format("truetype"),url(../fonts/montserrat-regular-webfont.svg#MontserratNormal) format("svg");
      font-weight:400;
      font-style:normal
  }
  
  @font-face {
      font-family:'MontserratBlack';
      src:url(../fonts/montserrat-black-webfont.eot);
      src:url(../fonts/montserrat-black-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/montserrat-black-webfont.woff) format("woff"),url(../fonts/montserrat-black-webfont.ttf) format("truetype"),url(../fonts/montserrat-black-webfont.svg#MontserratBlack) format("svg");
      font-weight:900;
      font-style:normal
  }
  
  @font-face {
      font-family:'MontserratBold';
      src:url(../fonts/montserrat-bold-webfont.eot);
      src:url(../fonts/montserrat-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/montserrat-bold-webfont.woff) format("woff"),url(../fonts/montserrat-bold-webfont.ttf) format("truetype"),url(../fonts/montserrat-bold-webfont.svg#MontserratBold) format("svg");
      font-weight:700;
      font-style:normal
  }
  
  @font-face {
      font-family:"ParentsSuckRegular";
      src:url(../fonts/parentssuck.eot);
      src:url(../fonts/parentssuck.eot#iefix) format("embedded-opentype"),url(../fonts/parentssuck.woff) format("woff"),url(../fonts/parentssuck.ttf) format("truetype"),url(../fonts/parentssuck.svg) format("svg");
      font-weight:700;
      font-style:normal
  }
  
  /* HEADER */
  #logo {
      float:left
  }
  
  .mainHeader {
      clear:both;
      color:#000;
      background-color:#fff;
      height:30px;
      padding-bottom:30px
  }
  
  .mainNav {
      margin:0
  }
  
  .mainNav li {
      display:inline;
      margin-right:50px;
      font-family:MontserratBlack;
      text-transform:uppercase;
      font-size:35px;
      color:#BBB;
      position:static;
      line-height:1.9em
  }
  
  #about,#training,#news,#contact,a {
      color:#bcbcbc
  }
  
  #about:hover,#training:hover,#news:hover,#contact:hover,nav li .current {
      color:#13C63E
  }
  
  a {
      text-decoration:none
  }
  
  /* DROP-DOWN MENUS */
  .dropdown {
      position:relative
  }
  
  .drop-nav {
      position:absolute;
      display:none
  }
  
  .drop-nav li {
      border-bottom:1px solid rgba(255,255,255,.2)
  }
  
  .dropdown:hover &gt; .drop-nav {
      display:block
  }
  
  .dropdown1 {
      position:relative
  }
  
  .drop-nav1 {
      position:absolute;
      display:none
  }
  
  .drop-nav1 li {
      border-bottom:1px solid rgba(255,255,255,.2)
  }
  
  .dropdown1:hover &gt; .drop-nav1 {
      display:block
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;header class="mainHeader"&gt;
          &lt;ul class="mainNav"&gt;
              &lt;li&gt;
                  &lt;a class="current" href="/" id="logo"&gt;&lt;img src="images/logo.png"&gt;&lt;/a&gt;
              &lt;/li&gt;
  
  
              &lt;li class="dropdown"&gt;
                  &lt;a href="/about" id="about"&gt;About&lt;/a&gt;
  
                  &lt;ul class="drop-nav"&gt;
                      &lt;li&gt;
                          &lt;a href="/testimonials"&gt;Testimonials&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
  
              &lt;li id="news"&gt;Services&lt;/li&gt;
  
  
              &lt;li class="dropdown1"&gt;
                  &lt;ul class="drop-nav1"&gt;
                      &lt;li&gt;
                          &lt;a href="/the-meltdown-bootcamp" id="bootcamp"&gt;The Meltdown&lt;/a&gt;
                      &lt;/li&gt;
  
  
                      &lt;li&gt;
                          &lt;a href="/personal-training" id="personalTraining"&gt;Personal Training&lt;/a&gt;
                      &lt;/li&gt;
  
  
                      &lt;li&gt;
                          &lt;a href="/PIYO" id="piyo"&gt;PIYO / Burn!&lt;/a&gt;
                      &lt;/li&gt;
  
  
                      &lt;li&gt;
                          &lt;a href="/LBDProject" id="bootcamp"&gt;Little Black Dress&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
  
              &lt;li&gt;
                  &lt;a href="/training" id="training"&gt;Blog&lt;/a&gt;
              &lt;/li&gt;
  
  
              &lt;li&gt;
                  &lt;a href="/contact" id="contact"&gt;Contact Us&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/header&gt;
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm having a bit of trouble with a drop-down menu in my code. I made one based on <a href="http://blog.teamtreehouse.com/create-simple-css-dropdown-menu" rel="nofollow">this.</a> As you can see, the second drop-down menu does not drop. Sorry if this is a simple issue, I started learning HTML and CSS two days ago.
  Thanks!</p>