title: Secondary dropdown menu within a dropdown menu not showing
body: <p>I'm having trouble getting a secondary dropdown menu to appear to the right of one of the dropdown links I hover over but it does not appear..</p>
  
  <p>I have positioned the secondary dropdown menu accordingly using margins.. If you change the width of the <em>.subDropdown</em> class to a value e.g. 100px, you can see the dropdown is where it should be.. so I'm not sure why it does not change when I code in a 'hover' event..</p>
  
  <p><a href="https://jsfiddle.net/yje82den/" rel="nofollow noreferrer">https://jsfiddle.net/yje82den/</a></p>
  
  <p>Can't see what I'm missing..</p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>&lt;div class="navbtn"&gt;
  &lt;p&gt;MENU BUTTON&lt;/p&gt;
  
  &lt;div class="dropdown"&gt;
      &lt;div class="dropdownitem"&gt;Link 1&lt;/div&gt;
      &lt;div class="dropdownitem"&gt;Link 2&lt;/div&gt;
      &lt;div class="dropdownitem" id="sub"&gt;Link 3 &amp;#8594;&lt;/div&gt;
      &lt;div class="subDropdown"&gt;
          &lt;div class="dropdownitem"&gt;Link 4&lt;/div&gt;
          &lt;div class="dropdownitem"&gt;Link 5&lt;/div&gt;
          &lt;div class="dropdownitem"&gt;Link 6&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>The CSS:</strong></p>
  
  <pre><code>.navbtn {
  background-color: #009337;
  max-width: 250px;   
  }
  
  .dropdown {
  height:0;
  overflow: hidden;
  transition: height 0.5s;
  }
  
  .dropdownitem {
  background-color: #00bf48;
  border-top: 1px solid rgba(0,0,0,0.4);
  padding: 10px;  
  transition: background-color 0.5s;
  }
  .dropdownitem:hover {background-color:#43e27f;}
  
  .subDropdown .dropdownitem {
  background-color: #23f171;
  }
  
  .subDropdown {
  position: fixed;
  margin: -39px 0 0 250px;
  height: 120px;
  width: 0;
  overflow: hidden;
  transition: width 0.5s;
  }
  
  .navbtn:hover .dropdown {height:115px;}
  #sub:hover .subDropdown {width: 250px;}
  </code></pre>