Bene, mi sono complicata la vita inutilmente (come al solito!), la soluzione era molto più semplice di quanto immaginassi
capita a tutti, molte volte anche hai più bravi. Il tutto sta nel non arrendersi e nella continua pratica, vedo infatti che sei riuscita in qualche modo nell'intento.

Noto comunque un'ulteriore svista nel tuo ultimo script. Nel primo ciclo stai aprendo il <div class='menu'>, in sostanza uno per ogni select, ma hai messo la chiusura solo una volta dopo il ciclo stesso. E' chiaro che risulterà un html malformato. Se vuoi che il div sia unico e che avvolga tutti i select, dovrai metterne l'apertura all'inizio, prima del ciclo stesso; se invece intendi creare più div, uno per ogni select, dovrai metterne la chiusura prima che sia concluso il primo ciclo.

Comunque, come si potrebbe migliorare la mia soluzione? Vorrei arrivare a capire bene come "muovermi" in strutture dati "complesse" come questa.
Se la struttura è conosciuta a priori, come nel tuo caso, in generale può andare bene il procedimento da te usato, cioè accedendo alle proprietà degli oggetti in modo diretto e iterando gli elementi degli array là dove ti serve.

Diverso sarebbe se si volesse eseguire un parsing di una struttura dove non si conoscono né il tipo di dati né le eventuali proprietà degli oggetti, per cui andrebbero esaminati singolarmente tutti i vari livelli della struttura con delle iterazioni o in modo ricorsivo, analizzando opportunamente tutti i contenuti. Ma questo non è il tuo caso.

Nel tuo caso la struttura è comunque conosciuta e relativamente semplice. In casi più complessi sì fa uso anche di librerie/framework che semplificano ulteriormente la stesura del codice; non mi sembra comunque il tuo caso.

Grosso modo la tua soluzione finale può andare bene, non c'è molto da migliorare.