Rozbalovací menu

V ukázkové stránce je hotové menu, uspořádané do několika sloupečků.

Chceme, aby se každý sloupeček ukázal až když najedeme myší na jeho nadpis. Při přejetí myší by navíc měla každá položka zesvětlat.

Možný postup

1. Přidáme začátek značky `<menu>` před nadpis "Kontakty" a konec značky `</menu>` až za konec seznamu `</ul>`. Podobně i předcházející sloupeček nabídky zabalíme do další značky `menu`.
2. Do značky `<style>` přidáme nový selektor `menu { display: inline-block; vertical-align: middle; }`
3. Přidáme další selektor `li:hover { background-color: white; }`
4. Do selektoru `ul { ... }` přidáme pravidla `position: absolute; background-color: lightgray; z-index: 1;`
5. Přidáme selektor `menu:not(:hover) ul { display: none; }`, aby se položky menu schovávaly, když nad ním není myš.
6. Místo `display: none` můžeme s podobným účinkem použít `opacity: 0`. To umožní mizející menu animovat, pokud přidáme ještě selektor `menu ul { transition: opacity 0.5s; }`