title: onClick Dropdown menu Responsive Website
body: <p>I'm working on making my site responsive and so I needed to have a decent menu for the mobile view.
  So i got myself a button which only pops up when im in 480px or lower which is good. But the problem is:
  <strong>Making the menu drop down won't work.</strong> All I need is an simple dropdown menu but i cant manage to make it work.</p>
  
  <p>jQuery Link:</p>
  
  <pre><code> &lt;link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" /&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="mobimenu"&gt;
      &lt;a href="#menu"&gt;
      &lt;img src="threelines.png" alt="menu button"&gt;
      &lt;/a&gt;
      &lt;div id="mobidrop"&gt;
          menu comes here
      &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>        #mobimenu{
              display: none;
          }
  
          #mobidrop{
              display:none;
          }
  
      @media screen and (max-width: 480px) {
  
      #mobimenu {
          display: block;
          float: right;
      }
  
      #mobidrop{
  
          width: 100px;
          height:50px;
          background-color: red;
      }
  
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function(){$("#mobimenu").on('click', function() {
     $("#mobidrop").show();
  });
  </code></pre>