Zuerst:
Hier gibt es eine gute Übersicht über Varianten und Möglichkeiten für responsive Menüs. Hier kannst du dich schlau machen, wie man ein responsive Menü prinzipiell erstellt. Da war mein erstes Beispiel wohl zu spezifisch und keine wirkliche Hilfe. Auch Untermenüs kannst du nach dem selben Prinzip erstellen, ich wette, hier findet man auch tutorials, wenn man nach responsive menu css submenu (oder ähnliches) sucht.

Beispiel für nicht korrekte HTML-Semantik? Du hast nur ein Menü auf deiner Seite, hast aber im HTML-Code zwei Menüs. Das eine Menü (das "Desktop"-Menü) ist sogar semantisch ordentlich codiert. Allerdings hast du, warum auch immer, ein zweites Menü eingefügt, welches keinerlei Struktur aufweist. Den Teil in <nav> kannst du komplett löschen und dafür das <div id="navi"> mit <nav> ersetzen. Damit hast du einmal eine semantisch sinnvolle Grundlage für ein responsive Menü. Die von mir gezeigten Beispiele verwenden alle kein zusätzliches (unnötiges) Markup nur um das Menü zu generieren.