Menu na stronach internetowych najczęściej tworzy się na podstawie zagnieżdżonych list wypunktowanych. Przykład podstawowej struktury prostego jednopoziomowego menu:

<ul>
   <li><a href="/link/do/zasobu1.html">Opcja 1</a></li>
   <li><a href="/link/do/zasobu2.html">Opcja 2</a></li>
   <li><a href="/link/do/zasobu3.html">Opcja 2</a></li>
</ul>

Jak widzicie hiperłącza umieszczone zostały w elementach listy. Teraz należy napisać odpowiedni arkusz CSS, który upiększy nasze menu. Nic nie stoi na przeszkodzie, aby zrobić menu dwupoziomowe i o większej ilości poziomów. Osobiście uważam, że menu dwupoziomowe w zupełności wystarczy. Nikt nie lubi jak musi wybrać coś z 4 poziomu, zjedzie myszą z menu, a menu się zwinie. Przykład prostego menu dwu-poziomego:

<ul>
   <li><a href="/link/do/zasobu1.html">Opcja 1</a></li>
   <li>
      <a href="/link/do/zasobu2.html">Opcja 2</a>
      <ul>
         <li><a href="/link/do/zasobu2-1.html">Opcja 2.1</a></li>
         <li><a href="/link/do/zasobu2-1.html">Opcja 2.1</a></li>
         <li><a href="/link/do/zasobu2-1.html">Opcja 2.1</a></li>
      </ul>
   <li><a href="/link/do/zasobu3.html">Opcja 2</a></li>
</ul>

Jak widzicie na przykładzie umieszczona została druga lista wypunktowana w jednym z podpunktów. To jest nasze podmenu. Teraz pora na CSS. CSS wykonuje tutaj całą robotę z widocznością menu i podmenu. To zostanie pokazane na przykładach.

13. Materiały dodatkowe - menu pionowe