title: populate a drop down menu list
body: <p>I have the following [fiddle][1]. I am trying to achieve two things &amp; I have fallen at the first hurdle.</p>
  
  <p>I want to have a drop down menu that when hovered over display a list of regions. The hover over part works however none of the regions are listed. I think its to do with the code below. However I'm not sure what is wrong? In my actual project I use an AJAX call to populate the menu but would like to know what is wrong with the code below?</p>
  
  <p>The end goal is where one of the regions is clicked on a javascript function will be called</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>$(document).ready(function () {
     
      var $region = $('#regionList');
      $region.append('&lt;li&gt;&lt;a&gt;Europe&lt;/a&gt;&lt;/li&gt;');
      $region.append('&lt;li&gt;&lt;a&gt;Japan&lt;/a&gt;&lt;/li&gt;');
      $region.append('&lt;li&gt;&lt;a&gt;North America&lt;/a&gt;&lt;/li&gt;');
    
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    /* Dropdown Button */
  .dropbtn {
      background-color: #9FACEC;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
  }
  
  /* The container &lt;div&gt; - needed to position the dropdown content */
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #ddd;}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {background-color: #4C66E9;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
          &lt;button class="dropbtn"&gt;Regions&lt;/button&gt;
          &lt;div class="dropdown-content"&gt;
              &lt;ul id="regionList"&gt;&lt;/ul&gt;           
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>