Menu poziome

Zacznijmy od typowej listy pionowej, którą następnie przekształcimy arkuszem stylów CSS.

#navicontainer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

Kod HTML listy pionowej:

Step II – przekształcenie listy pionowej na poziomą

Aby zmienić listę pionową na poziomą należy użyć display: inline; dla poszczególnych pozycji listy <li> i ustawić padding tylko dla elementu li, co zapewni małą spację pomiędzy linkami.

#navicontainer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#navicontainer ul li {
  display: inline;
  padding-left: 2px;
}

Kod HTML pozostaje taki sam:

Efektem będzie poziome menu utworzone z listy HTML.

Szybkie menu