移动端的bootstrap dropdown 如何调样式？

如图所示，下拉列表的下拉选项铺满整个页面，然后遮盖后面的列表数据，这种效果如何实现呢？

我目前所写的代码为：

        <!-- 下拉列表-->
        
   <div id="dropdown">
   <table>
       <tr>
           <td width="80%">消费记录</td>
           <td width="20%">
               <ul class="nav navbar-nav">
         <li class="dropdown">
            <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
                                    请选择
            <span class = "caret"></span>
            </button>
               <ul class="dropdown-menu">
                  <li><a id="action-1" href="#">
                                                 一周内</a>
                  </li>
                  <li class="divider"></li>
                  <li><a href="#">一个月内</a></li>
                  <li class="divider"></li>
                  <li><a href="#">三个月内</a></li>
               </ul>
            </li>
         </ul>
           </td>
       </tr>
   </table>
   </div>

---

用z-index，就像做ps一样，一层一层叠起来。

先给一个透明灰色效果，设置为0层

background-color:rgba(0,0,0,.2)

或者

opacity:.2

兼容自己写

然后，给你的下拉菜单设置为1层?。

---

添加一个空容器，半透明黑色，下拉菜单出现时visible opacity 1, 应该还要实现点击这块区域dropdown收起吧，再添加个事件即可。
你可以去看看8dianhou.com 手机版，首页上汉堡包点击后应该就是你要的效果，我写的。