Disporre i sottomenu del menu a discesa orizzontale, Avvolto (tema TwentyTwelve WordPress modificato)

Il sito su cui sto lavorando utilizza il tema WordPress TwentyTwelve modificato. Il menu a discesa standard di quel tema è stato modificato per spingere il contenuto verso il basso quando si apre il sottomenu:

Problema: voglio sistemare i sottomenu in modo ordinato lungo l’intera larghezza dell’area del contenuto (960 px di larghezza), piuttosto che farli cadere uno sotto l’altro. Se il numero di voci di sottomenu è grande, voglio che il sottomenu si sovrapponga a più righe, ma che gli elementi siano disposti in file verticali ordinate.

Ecco come lo vedo. Attualmente i sottomenu sono vincolati al menu principale. Per ottenere quello che vuoi, penso che avresti bisogno di fare molte ristrutturazioni. Manterrei i sottomenu separati e li posizioneremo direttamente sotto il menu principale. È ansible codificare le voci del sottomenu per occupare la larghezza di 960 px (a mano so, anche se si utilizza wordpress) e se è necessario impostare il sottomenu più lungo in due righe. Dai a ciascun sottomenu un ID univoco e impostali per la visualizzazione: none in css. I tuoi menu principali hanno già identificatori univoci, quindi puoi creare regole css per le specifiche. Qualcosa come questo:

#menu-item-58:hover + #submenu1 {display:block;} #submenu1 {display:none;} #submenu1:hover{display:block;} //so submenu doesn't disappear when mouse hovers over. 

Ecco un esempio in cui puoi vedere in azione, ho usato div ma puoi modificarlo di conseguenza: http://jsfiddle.net/H3WB6/