title: adding a drop down menu to three line menu icon
body: <p>I am using an example From w3 to create a menu icon for my website. It works wells but I am trying to add a drop down menu when I click on the icon.    </p>
  
  <p>I added the div <code>id="mydropdown"</code> in an attempt to create the menu I want.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction(x) {
      x.classList.toggle("change");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .container {
          display: inline-block;
          cursor: pointer;
      }
      
      .bar1, .bar2, .bar3 {
          width: 35px;
          height: 5px;
          background-color: #333;
          margin: 6px 0;
          transition: 0.4s;
      }
      
      /* Rotate first bar */
      .change .bar1 {
          -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
          transform: rotate(-45deg) translate(-9px, 6px) ;
      }
      
      /* Fade out the second bar */
      .change .bar2 {
          opacity: 0;
      }
      
      /* Rotate last bar */
      .change .bar3 {
          -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
          transform: rotate(45deg) translate(-8px, -8px) ;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
      &lt;h1&gt;
           &lt;div class="container" onclick="myFunction(this)"&gt;
              &lt;div class="bar1"&gt;&lt;/div&gt;
              &lt;div class="bar2"&gt;&lt;/div&gt;
              &lt;div class="bar3"&gt;&lt;/div&gt;
  
                  &lt;div id="myDropdown" class="dropdown-content"&gt;
                  &lt;a href="#"&gt;Link 1&lt;/a&gt;
                  &lt;a href="#"&gt;Link 2&lt;/a&gt;
                  &lt;a href="#"&gt;Link 3&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/h1&gt;
          
             
             
   </code></pre>
  </div>
  </div>
  </p>