サイドバーのアコーディオンを作りました。
しかし、このままアコーディオンを表示するとbody内のテーブル(列1列2と書いてあるやつ)がそのまま右にズレてしまいます。

右にスライドして全部ズレるのではなく、列１列２などと書いてあるテーブルの上に乗っかるように(上書きするように)表示したいです。
どのようにすればいいでしょうか？

追記です。
すいません、乗っからせたいのですが、下の「列１列２」が見えてほしくないので、乗っかった部分はアコーディオンの領域でまるごと塗りつぶしたいということです。

<!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>HorrizontalAccordion</title>

        <script src="jquery.js"></script>

        <script>
            function acodion(){
                $('#acodion').animate({
                    width: 'toggle'
                }, 'normal');

            }
        </script>

        <style>
            .sidemenu {
              float: left;
              cursor: pointer;
            }

            .vertical {
              writing-mode: tb-rl;
              direction: ltr;
              float: left;
              cursor: pointer;
              background-color:#00ff00;
             }

            .HiddenItem
            {
                display: none;
                float: left;
            }
        </style>


    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col col-md-12 col-md-offset-0">
                    <br />
                </div>
            </div>
        </div>

        <form>

            <span id='acodion' class="HiddenItem">
                メニュー 1-1<br/>
                メニュー 1-2<br/>
                メニュー 1-3<br/>
            </span>

            <span id='sidemenu' onclick="acodion()">
                <span class='vertical'>アコーディオンメニュー</span>
           </span>

       <div class="container">
            <div class="row">

                <div class="col col-md-11 col-md-offset-0">
                <table>
                    <tr>
                        <td>列1</td><td>列2</td><td>列3</td>
                    </tr>
                </table>
                </div>
            </div>
       </div>

        </form>

    </body>
    </html>