グローバルナビゲーションをスマホ版のサイトにつけるには？

先日無事にパソコン版にはグローバルナビゲーションをつけられましたが、、

www.totalbeauty.work

スマホ版がなかなか手間取りました。本当はPC版と似たようなデザインのものをつけたかったので、試行錯誤しまくったのですがどうにもうまくできず、結局こんなデザインのものに落ち着きました。トグルメニューといって、プルダウン式のものです。使い勝手はいいのか不明ですが、デザインは逆にすっきりとして良かった、、と思いたい。

参考にさせていただいたのはこのサイトです。

www.yukihy.com

ちなみに当ブログのソースはこちらです。「デザイン」の中の「タイトル下」の「スマートフォン用にHTMLを設定する」 に貼り付けます。

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
    <ul id='menu'>
    <li><a href="TOP">http://www.totalbeauty.work">TOP
 <li><a href="http://www.totalbeauty.work/archive/category/子育て">子育て</a></li>
    <li><a href="http://www.totalbeauty.work/archive/category/レビュー">レビュー</a></li>
    <li><a href="http://www.totalbeauty.work/archive/category/グルメ">グルメ</a></li>
    <li><a href="http://www.totalbeauty.work/archive/category/ブログ運営">ブログ運営</a></li>

    </ul>
     
    <style type="text/css">
    #top-editarea{
     background: #dcdcdc;/*外側の背景*/
     text-align: right;/*MENUの文字の位置*/
    }
    #top-editarea .section{
     margin: 0;
     width: 100%;
    }
    .menu-toggle{
     color: #444444;/*MENUの文字色*/
     display: inline-block;
     padding: 5px;
    }
    #menu {
     display: none;
     padding: 0;
     margin: 0;
    }
    #menu li{
     list-style-type: none;
     background: #f5f5f5;/*リストの背景色*/
     margin: 0 auto;
    }
    #menu li a {
     color: #444444;/*リストの文字色*/
     font-weight: bold;
     display: block;
     padding: 7px;
     text-align: left;/*リストの文字の位置*/
    }
    </style>
     
    <script type="text/javascript" src="">http://code.jquery.com/jquery-1.9.1.min.js">
    <script>
    $(function(){
        $(".menu-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
    </script>

もしも参考になりましたら幸いです！