Dropdown panel jQuery Mobile 1.4

http://stackoverflow.com/questions/22105359/how-to-make-drop-down-panel-in-jquery-mobile-1-4-0

by katalin_2003

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" 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"> <a href="#Mainnavpanel" class="ui-btn ui-btn-icon-left ui-btn-icon-notext ui-nodisc-icon ui-icon-bars" data-rel="popup"></a>

    <h1>Header</h1>

  </div>
  <div data-role="content">content</div>
</div>

CSS

.ui-popup {
  width: 200px;
}

#MainPageheader a {
  margin-left: 60px !important;
}

#Mainnavpanel-popup {
  top: 40px !important;
}