I have a popdown menu in the header.  On iOS it works perfectly.  On Android... well... if you push the menu button some random number of times the MIGHT eventually popup where it's supposed to.  It does always popup (generally on the opposite side of the screen) and when its up none of the selections are clickable but instead just dismiss the menu.

Here are the files I'm including:

1. <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.min.css" />
2. <script src="jquery.mobile/jquery-2.1.4.min.js"></script>
3. <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>

The code looks like this (straight off the jqm site):

1.     <div id="header" data-role="header" data-theme="b">
2.         <h1>My Cool App</h1>
3.            <a href="#popupMenu" id="menu" data-rel="popup" data-transition="slidedown" data-position-to="#position-header" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-right ui-icon-bars ui-btn-icon-right ui-btn-b">Menu</a>
4.         <div data-role="popup" id="popupMenu" data-theme="b">        
5.           <ul data-role="listview" data-inset="true" >
6.            <li><a href="settings.html" rel="external" class="ui-icon-gear">Settings</a></li>
7.            <li><a href="about.html" rel="external" class="ui-icon-info">About</a></li>
8.            <li><a href="login.html" rel="external" class="ui-icon-lock">Login/out</a></li>
9.            <li id="location"><a href="location.html" rel="external" class="ui-icon-location">Location</a></li>
10.            <li><a href="alerts.html" rel="external" class="ui-icon-alert">Alerts</a></li>
11.           </ul>
12.       </div>
13.     </div><!-- /header -->

This is what it looks like to the user:

And of course, this is what it should look like and what it looks like on iOS:

I've also tried this in numerous browsers (IE10. Chrome and Firefox) and there are no issues.. only on Android devices (i.e 4.2.2 >).

Any ideas?