jQuery Mobile Header Dropdown Menu

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page" id="MainPage">
    <div data-role="popup" style="float:right;" id="Mainnavpanel" data-theme="b" data-arrow="t">
        <ul data-role="listview">
            <li> <a href="#MainPageheader" data-rel="close" class="ui-btn">Close</a>

            </li>
            <li><a href="Page1.html" class="ui-btn" data-transition="none">Page1</a>

            </li>
            <li><a href="Page2.html" class="ui-btn" data-transition="none">Page2</a>

            </li>
            <li><a href="Page3.html" class="ui-btn" data-transition="none">Page3</a>

            </li>
        </ul>
    </div>
    <div data-role="header" id="MainPageheader" data-position="fixed" data-tap-toggle="false" data-fullscreen="false" style="float: right;">
         <h1>Header</h1>
        <a href="#Mainnavpanel" class="ui-btn ui-btn-icon-left ui-btn-icon-notext ui-nodisc-icon ui-icon-bars" data-rel="popup" style="float: right;"></a>
    </div>
    <div data-role="content">content</div>
</div>

CSS

.ui-popup {
    width: 200px;
}