Első lépésként eltüntetjük a lista elemek pontjait, és a listán lévő külső és belső margót:
navul {list-style-type:none;padding:0;margin:0;}
Második lépésként balra úsztatjuk a lista elemeket, ennek következtében egy sorba rendeződnek:
navli {float:left;}
A harmadik lépés, hogy a menüpontokat széthúzzuk, belső margó segítségével, ezt az a elemre tesszük. Ahhoz, hogy a belső margót rá tudjuk tenni az a elemre, blokkos elemmé kell alakítani, alapesetben szövegközi elem (inline).
Kész a vízszintes menü, jelen formájában már használható, a következő példában további stílusokkal látjuk el (elemek magassága, szövegszín, háttérszín):
navul {list-style-type:none; /* Listáról leveszi a pöttyöket */padding:0; /* Alapértelmezett lista margó letiltása */margin:0; /* Alapértelmezett lista belső margó letiltása */height:46px; /* Lista magasságának beállítása */background-color:#495057; /* A menü háttérszíne */font-family:sans-serif;}navli {float:left; /* Egy sorba rendezi a lista elemeket */}nava {display:block; /* Ez kell, hogy be tudjuk állítani az elem magasságát, belső margóját */padding:0 16px; /* Menü elemek közötti (belső) térköz */text-decoration:none; /* Eltünteti a linkekről az aláhúzást */height:46px; /* Menü elem magassága */line-height:46px; /* Vkálisan középre rendezi a menü elemben a szöveget */color:white; /* A menü elemek szövegszíne */}navli.activea {background-color:#099268; /* Aktív menü elem háttérszíne */}nava:hover {background-color:#0ca678; /* Kurzor alatt lévő menü elem héttérszíne */}