Menu sa štandardne robí ako list linkov takže sa tam používa presne rovnaké tagy ako v listoch. Čo sa týka CSS tak menu je jedna z najdôležitejších častí stránky preto by malo byť aj adekvátne urobené.
Toto bude naše menu, ktorému budeme zadávať vlastnosti:
<ul>
<li>Domov</li>
<li>O nás</li>
<li>Tím</li>
<li>Kontakt</li>
</ul>
!Pozor! Pri listoch si musíme dávať pozor na to k akému selektoru dávame vlastnosť.
Menu môže byť horizontálne alebo vertikálne. Ak ho chcete vertikálne tak netreba nič robiť, lebo tak je nastavené automaticky. Ak však budete chcieť horizontálne, tak nastavíte vlastnosť display na inline a dáte ju selektoru ul li. Na začiatku je dobré si vynulovať vlastnosti, ktoré majú listy nastavené automaticky.
list-style-type: none;
margin: 0;
padding: 0;
Tieto vlastnosti sme priradili k selektoru ul, teda celému listu.
Ak chceme nastaviť pozadie celého menu, tak vlastnosť color priradíme selektoru ul ak jednotlivým položkám v menu tak k selektoru ul li.
Avšak na to, aby nás menu aj niekam poslala, na danú podstránku, tak musíme dať celý obsah li prvku do vnútra linku (7.kapitola). Takže naše menu bude potom vyzerať takto:
<ul>
<li><a href="#">Domov<a href="#"></li>
<li><a href="#">O nás<a href="#"></li>
<li><a href="#">Tím<a href="#"></li>
<li><a href="#">Kontakt<a href="#"></li>
</ul>
Potom, keď budeme chcieť priradiť nejakú vlastnosť iba li prvkom, a nie celému listu, tak selektor bude ul li a.
Keď budeme chcieť vedieť, na ktorej stránke sme, tak budeme musieť použiť selektor ul li a:active. K nemu si už môžeme priradiť akékoľvek vlastnosti,ktoré chceme, najlepšie také, ktoré zvýraznia daný li prvok v menu.
Ak budeme chcieť aby sa nám nejako zvýraznil daný prvok v menu, tak priradíme ľubovoľnú vlastnosť selektoru ul li a:hover. Tento selektor :hover môžeme použiť aj pri iných elementoch ako p, h1, div, image... avšak musia byť súčasťou linku. (tak ako prvky li v druhej verzii našeho menu)
Na niektorých stránkach je menu na celej lavej strane a zostáva tam aj keď skrolujete stránku ďalej. To sa robí cez pozíciu, musíte mu nastaviť fixnú pozíciu a ak chcete aby bolo menu po celej výške tak dáte ešte aj atribút výška na 100%. Tuna nastáva problém, že všetky prvky sa tam nemusia zmestiť. Vtedy tam ešte pridáte overflow: auto; čo urobí, že v menu sa bude dať skrolovať. Tento príkaz môžeme použiť aj pri iných elementoch, keď chceme aby sa do ich určeného miesta zmestili.