Przerobienie menu na responsywne

Mam sobie taki kod CSS, tyle, że nie bardzo wiem jak przerobić to aby menu było responsywne. Najlepiej by się zwijało w te 3 taki paski. To, że wykorzystać media-queries to wiem, ale jak to wykorzystać już aby schować statyczne menu i stworzyć mobilne to już niestety nie wiem.

    /*Menu*/
        #menu, #menu ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #menu {
            width: 100%;
            border: 1px solid #222;
            background: #111 linear-gradient(#444, #111);
            box-shadow: 0 1px 1px #777;
        }

        #menu:before,
        #menu:after {
            content: "";
            display: table;
        }

        #menu:after {
            clear: both;
        }

        #menu {
            zoom:1;
        }

        #menu li {
            float: left;
            border-right: 1px solid #222;
            box-shadow: 1px 0 0 #444;
            position: relative;
        }

        #menu a {
            float: left;
            padding: 12px 30px;
            color: #999;
            text-transform: uppercase;
            font: bold 12px Arial, Helvetica;
            text-decoration: none;
            text-shadow: 0 1px 0 #000;
            transition-duration: 300ms;

        }

        #menu li:hover > a {
            color: #fafafa;
            background-color: #ff9a12;
        }

        *html #menu li a:hover { /* IE6 only */
            color: #fafafa;
        }