Rendre mon menu déroulant en responsive

Salut à vous

Je viens demander votre aide, j'ai du mal avec le css, et encore plus avec le responsive.

J'aurais besoin de rendre mon menu responsive, en évitant au maximum le Js, afin de toucher tout le monde, même ceux qui n'aime pas Js (Hé oui ça existe ^^)

Pourriez vous m'aider à réaliser ceci?
Je souhaiterais qu'il est le comportement de ce menu :
Menu responsive à imiter, pour la version mobile, et pour la version tablète, que le menu se compresse en deux lignes comme sur cet exemple.

Je joint le html et le css, sachant que le menu est dynamique, donc susceptible d'avoir au maximum 9 menu (accueil et contact compris), ainsi que des sous-sous-menus.

Je vous remercie d'avance.

Cordialement

Html du menu (2 menus avec sous-menu)

<div id="navi" class="fixed-top">
        <ul id="menu">
            <li><a href="./">Accueil</a></li>
            <li>
                <a href="#">Menu 1 </a>
                <ul>
                    <li><a href="./sousmenu1">› Un long Sous Menu 1 de 40 caratères ---</a></li>
                    <li><a href="./sousmenu2">› Sous Menu 2</a></li>
                    <li><a href="./sousmenu3">› Sous Menu 3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Menu 2 </a>
                <ul>
                    <li><a href="./sousmenu12">› Sous Menu 1-2</a></li>
                </ul>
            </li>
            <li><a href="">Menu 3 </a>
                <ul>
                    <li><a href="">Sous sous-menu</a>
                        <ul>
                            <li><a href="./ssmenu">Contenu dous s-s-menu</a></li>
                            <li><a href="./ssmenu">Contenu dous s-s-menu</a></li>
                        </ul>
                    </li>
                    <li><a href="./contact">Sous sous-menu 1</a></li>
                </ul>
            </li>
            <li><a href="./contact">Contact</a></li>
        </ul>
    </div>

Css (les sous-sous-menu ne sont pas encore stylisés entièrement actuellement)

#navi{
 /* bordures */
 border-bottom: 2px solid #000;
 /* Background */
 background-color:#52575c;
 background-image:-moz-linear-gradient(top, #3a3f44, #52575c);
 background-image:-ms-linear-gradient(top, #3a3f44, #52575c);
 background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#3a3f44), to(#52575c));
 background-image:-webkit-linear-gradient(top, #3a3f44, #52575c);
 background-image:-o-linear-gradient(top, #3a3f44, #52575c);
 background-image:linear-gradient(top, #3a3f44, #52575c);
 background-repeat:repeat-x;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3f44', endColorstr='#52575c', GradientType=0);
 border-color:#000 #52575c #52575c;
 border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);*background-color:#52575c;
 filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
 /* bordures */
 box-shadow:inset 0px 0px 1px #e8edf0;
 -moz-box-shadow:inset 0px 0px 1px #e8edf0;
 -webkit-box-shadow:inset 0px 0px 1px #e8edf0;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 z-index:1030;
}
#menu{
 height:30px;
 margin:0 auto;
 padding:3px 30px;
}

#menu li /* Elements des listes */     
{
 width:111px;
 height:25px;
 float:left;
 display:block;
 position:relative;
 text-align:center;
 margin-right:10px;
 padding:7px 7px 0 7px;
 border:none;
}
#menu li:hover /* Elements des listes */     
{
 margin-right:10px;
 padding:5px 7px 0 7px;
 background:#fff;
}
#menu li:hover a{
 color:#161616;
 text-shadow:none;
}
#menu li a{
 font-size:15px;
 color:#eeeeee;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow:none;
}

#menu li ul /* Sous-listes */
{ 
 position: absolute; /* Position absolue */
 left: -999em; /* Hop, on envoie loin du champ de vision */
 margin-top:9px; /* On décale les sous-listes pour qu'elles ne soient pas au dessus des listes */
 width:280px;
 /* coins arrondis */
 border-width:2px 3px 3px 3px;/* Haut, Droite, Bas, Gauche*/
 border-style:solid;
 border-color:#fff;
 border-radius:5px 5px 5px 5px;
 -moz-border-radius:5px 5px 5px 5px;
 -webkit-border-radius:5px 5px 5px 5px;
 background:#adadad;
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
 border-left:3px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
 border-top:1px solid #fff;
 height:35px;
 font-size:12px;
 width:263px;
 text-align:left;
}
#menu li ul li:hover{
 border-top:1px solid #fff;
 border-left:3px solid #f53b3b;
 height:37px;
}
#menu li ul li a{
 line-height:27px;
 text-shadow:none;
}
#menu li ul li:hover a{
 line-height:31px;
 text-shadow:none;
}
#menu li:hover ul, #menu li.sfhover ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
 left:-999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
 left:0; /* Repositionnement normal */
 min-height: 0; /* Corrige un bug sous IE */
}