Questo è il comportamento normale del rendering della pagina. Gli elementi vengono impilati dal basso verso l'alto in base all'ordine con cui sono scritti (e quindi letti) nella pagina HTML. Gli elementi che vengono dopo, hanno un indice di impilamento maggiore rispetto ai precedenti, per questo nel tuo caso è normale che l'elemento header (letto per ultimo) si porti al di sopra dell'elemento nav (letto prima).

Per modificare l'ordine di impilamento è necessario usare la proprietà z-index. Questa può essere applicata solo se un elemento ha un valore di position diverso da static (valore di default).

Nel tuo caso potresti applicare z-index anche solo sull'elemento ul che sta dentro il nav, dato che ha già una position:relative; oppure puoi applicarlo comunque al nav ma dovrai impostare position:relative anche per questo elemento.

Considera inoltre che trattandosi del menu, che si presume debba stare sempre sopra qualsiasi altro elemento della pagina (a parte casi particolari come elementi overlay), è buono applicare un valore sufficientemente elevato per la proprietà z-index. E' facile infatti vedere valori con una serie di 9 (tipo 9999) per questa proprietà applicata agli elementi che devono apparire sempre "a galla" come, appunto, gli elementi di navigazione.

Nel tuo caso puoi quindi aggiungere questa regola sotto il selettore nav ul:
codice:
nav ul {
   /* ...
            qui tutte le altre proprietà esistenti
            compresa position:relative
       ...
   */
   z-index: 999;
}
E' chiaro che si tratta di nozioni di base. Se il tuo intento è quello di studiare i CSS, il mio consiglio è di seguire piuttosto qualche tutorial, cosi che puoi apprendere facilmente anche questo tipo di informazioni.