Bei mir gab es gleich zwei Gründe um ein Menu in den Wordpress Theme ein zu bauen. Zum einen wurde es eng in der Sidebar und weiter nach unten sollten die Seiten nicht rutschen. Auf der anderen Seite macht es bei vielen Unterseiten das ganze ein wenig zu gliedern. Nach dem Entschluss kommt dann erst mal das wie soll es Aussehen Problem, google gibt einiges an Beispielen aus die man sich erst einmal anschauen sollte. Ist auch diese Hürde genommen kann es an die Umsetzung gehen.
Die Wahl viel auf ein Beispiel von peterkroener.de was von ihm gut Dokumentiert worden ist, sowie ein Beispiel aus der Praxis in freier Umgebung.
Wordpress liefert bei den Seiten bereits die Struktur die gebraucht wird, wie meistens in Form einer Aufzählung, das sieht dann bei dieser Seite etwa so aus.

Dann kann man der Seite weiter in Text folgen, und umrahmen die Aufzählung noch mit einem <ul id=”navcontainer”> HTML Tag (schließen nicht vergessen </ul>). Das war es mit dem HTML Teil und die Details des Artikels schenken wir uns an dieser Stelle, damit zwar auch das der IE das nicht ohne JavaScript anzeigen kann doch kann das auch später folgen.

#navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */
#navi li { width:92px; float:left; } /* Horizontale Anordnung */
#navi li ul { display:none; } /* Normalzustand eingeklappt */
#navi li:hover ul { display:block; } /* Ausgeklappt */

#navcontainer { height:19px; position:relative; padding:0 0 0 23px;}
#navi { position:absolute;}

#navi li { border:1px solid #000; margin:0 2px 0 0; background:#9496e6;}
#navi ul li { border:none; margin:0; background:#9496e6;}
#navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; }
#navi a:link, #navi a:visited { color:#FFF; background:#9496e6; text-decoration:none; }
#navi a:active, #navi a:hover { color:#000; background:#9496e6; text-decoration:none; }
#navi .page_item { padding:2px 0;}
#navcontainer li.current_page_item { background:#F00;}

Style-Reset : Löscht das verhalten der Aufzählung, damit wird es zum normalen Text der untereinander steht würde.
Horizontale Anordnung : Breite und Ausrichtung des Menus
Normalzustand eingeklappt : alles unterhalb der ersten Ebene wird nicht angezeigt
Ausgeklappt : Wenn der Cursor über dem Element steht wird das unterliegende wieder angezeigt

Das ist schon mal die Funktion der Menus, es wird nebeneinander Dargestellt was dann folgt ist nur noch das Optische. Wordpress trägt noch “current_page_item” ein wenn der Listeneintrag der gerade angezeigen Seite entspricht, also legen wir dafür eine andere Hintergrundfarbe fest.

Beim anpassen der Breiten und Abstände ist das Box Model von CSS immer im Hinterkopf zu behalten.