在官方示例的上拉和下拉刷新加载页面,加入一个按钮,点击这个按钮弹出popover菜单,但是弹出的这个菜单全部被遮罩了,导致点击菜单上的链接无效,请问怎么解?

以下是页面布局代码
<body>
<footer class="mui-bar mui-bar-footer">
<a id="topbutton" class="mui-btn mui-btn-link mui-pull-right">点我弹出菜单</a>
</footer>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#bottomPopover" class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 3</a>
</li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">Item 4</a>
</li>
<li class="mui-table-view-cell">
<a href="#bottomPopover" class="mui-navigate-right">Item 5</a>
</li>
</ul>
<!--右下角弹出菜单-->
<div id="bottomPopover" class="mui-popover mui-popover-bottom">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="http://www.sohu.com">打开搜狐</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item8</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item9</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item10</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>