Rozwijana część poziomego menu CSS

Tworzenie przykładowego poziomego menu CSS mamy już za sobą, jednak to nie koniec czynności jakie możemy wykonać ze wspomnianym menu CSS. Do poziomego menu CSS możemy dodać jego część rozwijaną i właśnie tą czynnością zajmiemy się w tej części kursu CSS.

Końcowy efekt został zaprezentowany poniżej.

Nasze poziome menu CSS jest oparte na elemencie ol. Element ol tworzy uporządkowaną (domyślnie ponumerowaną) listę HTML.

Przykład:

<ol>
  <li>czerwone</li>
  <li>żółte</li>
  <li>białe</li>
</ol>

Rezultat:

  1. czerwone
  2. żółte
  3. białe

Jak widzimy powyżej, element ol wraz z elementami li utworzyli nam uporządkowaną (domyślnie ponumerowaną) listę HTML. W elemencie li oprócz zwykłego tekstu możemy również umiszczać różne inne elementy HTML. Jednym z tych elementów jest element ul, który wraz z elementami li tworzy nieuporządkowaną listę HTML.

Przykład:

<ol>
  <li>czerwone
    <ul>
      <li>serce</li>
      <li>truskawka</li>
      <li>krew</li>
    </ul>
  </li>
  <li>żółte
    <ul>
      <li>słońce</li>
      <li>cytryna</li>
      <li>banan</li>
    </ul>
  </li>
  <li>białe
    <ul>
      <li>mleko</li>
      <li>śnieg</li>
      <li>cukier</li>
    </ul>
  </li>
</ol>

Rezultat:

  1. czerwone
    • serce
    • truskawka
    • krew
  2. żółte
    • słońce
    • cytryna
    • banan
  3. białe
    • mleko
    • śnieg
    • cukier

W przykładzie zaprezentowanym powyżej element ul został umieszczony w elemencie li, który jest dzieckiem elementu ol. Taki układ elementów HTML nazywamy zagnieżdżoną listą ul w liście ol. Wspomniany układ elementów HTML możemy między innymi wykorzystać, gdy chcemy przedstawić kilka rzeczy, które należą do tej samej kategorii (tak jak w naszym przykładzie, rzeczy należące do kategorii czerwone, żółte itp.). Wspomniany układ elementów HTML możemy wykorzystać w naszym poziomym menu CSS, dzięki czemu będziemy mogli uzyskać efekt rozwijanej części danego menu CSS. Zaprezentowany układ elementów HTML możemy wykorzystać w naszym przykładowym menu CSS, ponieważ zazwyczaj, gdy chcemy utworzyć rozwijaną część menu, to linki (odnośniki), które znajdą się w rozwijanej części danego menu odnoszą się do tej samej kategorii.

Na podstawie przedstawionych informacji rozbudujemy nasz kod HTML z poprzedniej części kursu CSS dodając do niego listy ul. Każda taka lista będzie tworzyć drugi poziom poziomego menu CSS, dla którego utworzymy odpowiednie reguły CSS, dzięki czemu wspomniany poziom stanie się częścią rozwijaną.

<body>

    <ol id="menu">
      <li><a href="#">link - 1</a>
        <ul>
          <li><a href="#">link - 1</a></li>
          <li><a href="#">link - 2</a></li>
          <li><a href="#">link - 3</a></li>
          <li><a href="#">link - 4</a></li>
          <li><a href="#">link - 5</a></li>
          <li><a href="#">link - 6</a></li>
        </ul>
      </li>
      <li><a href="#">link - 2</a>
        <ul>
          <li><a href="#">link - 1</a></li>
          <li><a href="#">link - 2</a></li>
          <li><a href="#">link - 3</a></li>
          <li><a href="#">link - 4</a></li>
        </ul>
      </li>
      <li><a href="#">link - 3</a>
        <ul>
          <li><a href="#">link - 1</a></li>
          <li><a href="#">link - 2</a></li>
          <li><a href="#">link - 3</a></li>
          <li><a href="#">link - 4</a></li>
          <li><a href="#">link - 5</a></li>
        </ul>
      </li>
    </ol>

  </body>

Rezultat:

Od tej pory widzimy, że do każdego unoszącego się w lewą stronę elementu li w naszym przykładowym poziomym menu CSS została dodana nowa lista ul wraz z elementami li oraz a. Elementy a będą tworzyć kolejne linki w danej liście ul. Przy okazji możemy zauważyć jak bardzo jest przydatne kolorowe tło danego elementu HTML, gdy tworzymy różne układy elementów HTML. W naszym przykładzie kolorowe tło oznacza granicę każdego elementu li (kolor czerwony, zielony, niebieski) oraz granicę elementu ol (kolor różowy). Widzimy, że każda lista ul umieszczona w elemencie li powiększa jego wysokość. Element ul jest wyświetlony pod każdym elementem a elementu li (pod dolną granicą elementu a), ponieważ domyślnie element ul jest elementem blokowym oraz dlatego, że element a w naszym poziomym menu CSS również jest elementem blokowym (ustaliliśmy dla niego właściwość display:block;).

Przyglądając się naszemu nowemu układowi elementów HTML (nowemu ze względu na dodanie do niego elementów ul), możemy zauważyć jak bardzo stał się pomocny selektor #menu > li:hover > a, który utworzyliśmy w poprzedniej części kursu CSS, ponieważ zawsze, gdy najedziemy kursrem myszki na obszar elementu li, styl wyglądu jego elementu dziecka a zostanie zmieniony (białe tło, niebieski kolor tekstu), dlatego gdy będziemy poruszać się kursorem myszki po elemencie ul, który został umieszczony w elemencie li, styl wyglądu wspomnianego elementu a będzie ciągle zmieniony.

Nasz układ elementów HTML (lista ul w liście ol) różni się nieco od domyślnego wyglądu wspomnianego układu elementów ol oraz ul, ponieważ w poprzedniej części kursu CSS sprawiliśmy, że elementy li elementu ol zostały wyświetlone jeden obok drugiego (dzięki właściwości float). Gydby tak się nie stało, nasz układ elementów HTML prezentowałby się podobnie jak wcześniej zaprezentowany przykład (z kategoriami czerwony, żółty itp.), który zawierał zagnieżdżoną listę ul w liście ol.

Przykład:

Jednak, dzięki temu że elementy li elementu ol zostały wyświetlone jeden obok drugiego nasze menu CSS prezentuje się następująco:

Tak naprawdę część rozwijana naszego poziomego menu CSS jest już gotowa, ponieważ tworzy ją każdy element ul wraz z elementami li oraz a umieszczonymi w każdym elemencie li elementuol, lecz do sprawienia, aby nasze menu prawidłowo pokazywało jego część rozwijaną, po najechaniu kursorem myszki na element li, który jest rodzicem danej listy ul, musimy wdrożyć dwa mechanizmy. Jednak zanim to nastąpi, umieścimy dodatkowy blokowy element HTML, wraz z przykładową zawartością tekstową, pod naszym menu CSS. Wspomniany element HTML w krótce ukaże nam pewne problemy, które będziemy musieli rozwiązać.

to jest przykładowy element - p - czyli paragraf, do którego została dodana przykładowa zawartość tekstowa, wspomniany element - p - znajduje się pod elementem - ol - w naszym kodzie HTML, dlatego wspomniany element - p - jest wyświetlony pod naszym poziomym menu CSS, dla danego elementu - p - zostało określone przykładowe obramowanie, kolor tła oraz marginesy wewnętrzne

Dodatkowo dla wszystkich elementów ul, które będą tworzyć rozwijaną część naszego poziomego menu CSS ustalimy nowy styl obramowania (border:3px dashed #000; czyli czarna przerywana linia), dzięki czemu łatwiej będzie nam dostrzec ich granice. Dla elementu ol również ustalimy nowy styl obramowania (border:3px solid #FA0; czyli pomarańczowa linia).

#menu {
  width:400px;
  margin:0 auto;
  padding:0;
  list-style-type:none;
  background-color:#FDF;
  border:3px solid #FA0;
}

#menu > li > ul {
  border:3px dashed #000;
}

Rezultat:

to jest przykładowy element - p - czyli akapit, do którego została dodana przykładowa zawartość tekstowa, wspomniany element - p - znajduje się pod elementem - ol - w naszym kodzie HTML, dlatego wspomniany element - p - jest wyświetlony pod naszym poziomym menu CSS, dla danego elementu - p - zostało określone przykładowe obramowanie, kolor tła oraz marginesy wewnętrzne

Mechanizm, który pozwoli nam na to, aby element ul pojawiał się tylko, gdy najedziemy kursorem myszki na jego element rodzic, czyli na element li elementu ol, będzie opierał się na właściwości display jej wartości none oraz wartości block oraz oczywiście selektorze :hover.

Selektor :hover, jak już wiemy z poprzednich części tego kursu CSS, określa wygląd elementu HTML, gdy najedziemy na dany element kursorem myszki. Gdy połączymy go z selektorem elementu oraz selektorem dziecka w następujący sposób li:hover > ul to dany selektor będzie określał wygląd elementu ul w momencie gdy najedziemy kursorem myszki na jego element rodzic li.

Właściwość display wraz z wartością none sprawia, że dany element HTML nie jest wyświetlany.

Właściwość display wraz z wartością block sprawia, że dany element HTML jest wyświetlany (jako element blokowy).

Korzystając z przedstawionych informacji tworzymy następujące reguły CSS:

#menu > li > ul {
  display:none;
  border:3px dashed #000;
}

#menu > li:hover > ul {
  display:block;
}

Selektor #menu > li > ul odszuka każdy element ul, który jest dzieckiem elementu li, który z kolei jest dzieckiem elementu o identyfikatorze menu, a następnie doda do takiego elementu ul między innymi właściwość display wraz z wartością none, dzięki czemu dany element ul nie zostanie wyświetlony.

Rezultat:

to jest przykładowy element - p - czyli akapit, do którego została dodana przykładowa zawartość tekstowa, wspomniany element - p - znajduje się pod elementem - ol - w naszym kodzie HTML, dlatego wspomniany element - p - jest wyświetlony pod naszym poziomym menu CSS, dla danego elementu - p - zostało określone przykładowe obramowanie, kolor tła oraz marginesy wewnętrzne

Gdy dodamy do naszego kodu regułę określoną za pomocą selektora #menu > li:hover > ul, w której to regule CSS została użyta właściwość display wraz z wartością block, nasze przykładowe poziome menu CSS będzie posiadało mechanizm, który pokaże jego część rozwijaną, czyli element ul wraz z jego zawartością, gdy najedziemy kursorem myszki na obszar elementu rodzica wspomnianego elementu ul, czyli na element li, który jest z kolei dzieckiem elementu o identyfikatorze menu.

Rezultat:

to jest przykładowy element - p - czyli akapit, do którego została dodana przykładowa zawartość tekstowa, wspomniany element - p - znajduje się pod elementem - ol - w naszym kodzie HTML, dlatego wspomniany element - p - jest wyświetlony pod naszym poziomym menu CSS, dla danego elementu - p - zostało określone przykładowe obramowanie, kolor tła oraz marginesy wewnętrzne

Od tej pory, gdy najedziemy kursorem myszki, na którykolwiek obszar jednego z elementów li, ktore tworzą poziome menu CSS, rozwijana część naszego menu CSS ukaże się naszym oczom.

Poznaliśmy mechanizm ukrywania oraz pokazywania rozwijanej części naszego poziomego menu CSS, lecz czegoś tu brakuje, ponieważ z reguły rozwijana część takiego menu jest wyświetlona ponad elementami HTML, które znajdują się pod danym menu CSS. Chcemy dążyć do efektu, który został zaprezentowany poniżej:

to jest przykładowy element - p - czyli akapit, do którego została dodana przykładowa zawartość tekstowa, wspomniany element - p - znajduje się pod elementem - ol - w naszym kodzie HTML, dlatego wspomniany element - p - jest wyświetlony pod naszym poziomym menu CSS, dla danego elementu - p - zostało określone przykładowe obramowanie, kolor tła oraz marginesy wewnętrzne

Aby uzyskać efekt jaki został zaprezentowany powyżej, musimy poznać drugi mechanizm, który pozwoli nam na wyświetlenie rozwijanej części naszego poziomego menu CSS nad elementami znajdującymi się pod danym poziomym menu CSS. Na chwilę zapominamy o tym, że rozwijana część naszego poziomego menu CSS posiada mechanizm, który odpowiada za jej ukrywanie oraz pokazywanie (usuwamy właściwość display z reguły określonej za pomocą selektora #menu > li > ul oraz selektora #menu > li:hover > ul).

to jest przykładowy element - p - czyli akapit, do którego została dodana przykładowa zawartość tekstowa, wspomniany element - p - znajduje się pod elementem - ol - w naszym kodzie HTML, dlatego wspomniany element - p - jest wyświetlony pod naszym poziomym menu CSS, dla danego elementu - p - zostało określone przykładowe obramowanie, kolor tła oraz marginesy wewnętrzne

Od tej pory naszym celem jest sprawienie, aby elementy ul, które tworzą rozwijaną część naszego poziomego menu CSS, znalazły się nad przykładowym elementem p, który został umieszczony pod głównym elementem naszego menu, czyli elementem ol. Przydadzą się nam informacje, które zostały zawarte w dziale pierwszym - Pozycja statyczna, relatywna, absolutna oraz ustalona.

Po przeczytaniu wspomnianej części działu pierwszego najważniejszą rzeczą jaką należy zrozumieć jest fakt, że gdy element HTML zostanie wyświetlony w pozycji absolutnej (position:absolute;) traci on obszar swojego wyświetlania się, tzn. nie oddziałuje on na pozostałe elementy HTML (tzn. nie zmienia ich pozycji oraz nie poszerza granicy szerokości lub wysokości swojego elementu rodzica). Dlatego element wyświetlony w pozycji absolutnej może znajdować się nad pozostałymi elementami HTML, które znajdują się na naszej stronie internetowej. Domyślnie początkową pozycją elementu wyświetlonego w pozycji absolutnej jest ta pozycja, ten punkt, który dany element zajmowałby, gdyby był wyświetlony w swojej domyślnej pozycji, czyli pozycji statycznej (static).

Zobaczmy co się stanie, gdy do elementów, które tworzą rozwijaną część naszego poziomego menu CSS, czyli elementów ul, dodamy właściwość position:absolute;.

#menu > li > ul {
  position:absolute;
  border:3px dashed #000;
}

Rezultat:

to jest przykładowy element - p - czyli akapit, do którego została dodana przykładowa zawartość tekstowa, wspomniany element - p - znajduje się pod elementem - ol - w naszym kodzie HTML, dlatego wspomniany element - p - jest wyświetlony pod naszym poziomym menu CSS, dla danego elementu - p - zostało określone przykładowe obramowanie, kolor tła oraz marginesy wewnętrzne

Od tej pory, gdy elementy ul, które tworzą część rozwijaną menu, zostaną wyświetlone, znajdą się one nad pozostałymi elementami HTML oraz nie zmienią ich pozycji, jak również nie poszerzone one granicy szerokości oraz wysokości swojego elementu rodzica, dzięki czemu ich element rodzic przestanie "widzieć" elementy wyświetlone w pozycji absolutnej, które zostały w nim umieszczone (z tą też widzimy przezroczysty kolor tła danego elementu ul).

W tym momencie, gdy przypomnimy sobie o mechanizmie odpowiadającym za ukrywanie oraz pokazywanie rozwijanej części naszego poziomego menu CSS możemy uznać, że jesteśmy w stanie uzyskać końcowy efekt, do którego dążymy, jednak zanim to uczynimy musimy rozwiązać jeszcze jeden problem.

Należy uważać na pewną sytuację. Część rozwijana poziomego menu CSS jest z reguły wyświetlona w pozycji absolutnej (position:absolute;), dzięki czemu jest ona wyświetlana nad pozostałymi elementami HTML, jednak gdy po wyświetleniu w oknie przeglądarki internetowej elementu HTML wyświetlonego w pozycji absolutnej zajdzie taka sytuacja, że dany element HTML wyświetlony w pozycji absolutnej oraz znajdujący się wyżej w kodzie HTML niż element HTML wyświetlony w pozycji relatywnej (position:relative;), spotka się swoim obszarem ze wspomnianym elementem wyświetlonym w pozycji relatywnej, element wyświetlony w pozycji relatywnej przekryje swoim obszarem element wyświetlony w pozycji absolutnej.

Przykład:

TEN ELEMENT - P - OD TEJ PORY JEST WYŚWIETLONY W POZYCJI RELATYWNEJ, PONIEWAŻ ZOSTAŁA DO NIEGO DODANA WŁAŚCIWOŚĆ POSITION WRAZ Z WARTOŚCIĄ RELATIVE

Nasz problem możemy w dosyć łatwy sposób rozwiązać, wystarczy, że skorzystamy z właściwości z-index, która określa indeks (pierwszeństwo wyświetlenia) elementów, które nie są wyświetlone w domyślnej pozycji statycznej (static). O wspomnianej właściwości z-index mogliśmy dowiedzieć się więcej z działu pierwszego - Indeks elementu HTML.

Domyślnie indeks elementu HTML wyświetlonego w interesującej nas pozycji absolute lub relative wynosi 0, jednak gdy dwa takie elementy HTML znajdą się jeden na drugim (po wyświetleniu w oknie przeglądarki internetowej), przeglądarka internetowa sprawi, że element znajdujący się niżej w kodzie HTML przekryje swoim obszarem element znajdujący się wyżej w kodzie HTML (tak jak w naszym przykładzie, element p wyświetlony w pozycji relatywnej i zanjdujący się niżej w kodzie HTML przekrywa swoim obszarem każdy element ul, który tworzy część rozwijaną poziomego menu CSS, oraz który jest wyświetlony w pozycji absolutnej i znajduje się wyżej w kodzie HTML, dlatego dla każdego elementu ul musimy określić wyższą wartość właściwości z-index, wyższą niż domyślna wartość 0, która znajduje się w obu wspomnianych elementach HTML).

#menu > li > ul {
  position:absolute;
  z-index:1;
  border:3px dashed #000;
}

Rezultat:

TEN ELEMENT - P - OD TEJ PORY JEST WYŚWIETLONY W POZYCJI RELATYWNEJ, PONIEWAŻ ZOSTAŁA DO NIEGO DODANA WŁAŚCIWOŚĆ POSITION WRAZ Z WARTOŚCIĄ RELATIVE

Na podstawie wszystkich informacji, jakie do tej pory poznaliśmy możemy przystąpić do budowy części rozwijanych naszego poziomego menu CSS, które będą wyświetlać się tylko, gdy najedziemy kursorem myszki na ich element rodzic, oraz które będą wyswietlać się nad pozostałymi elementami, kore zostały umieszczone pod danym menu CSS.

Wracamy do momentu, gdy do poziomego menu CSS (które utworzyliśmy w poprzedniej części kursu CSS), do jego elementów li, dodaliśmy listy ul, dzięki czemu nasze menu CSS prezentowało się w następujący sposób:

Do elementów ul dodajemy biały kolor tła (background-color:#FFF;). Z tych samych elementów ul usuwamy właściwości domyślne czyli marginesy zewnętrzne (margin:0;), marginesy wewnętrzne (padding:0;), domyślny wyróżnik listy ul (list-style-type:none;).

#menu > li > ul {
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

Do elementów li będących dziećmi elementu ul, który tworzy część rozwijaną danego menu CSS, dodajemy cień (box-shadow:0 -4px 4px -4px #AAA;).

#menu > li > ul > li {
  box-shadow:0 -4px 4px -4px #AAA;
}

Rezultat:

Dla elementu a, który znajduje się w części rozwijanej danego menu CSS określamy brak dekoracji tekstu (text-decoration:none;), marginesy wewnętrzne (padding:15px;), kolor tekstu (color:#000;). Sprawiamy również, aby wspomniany element a stał się elementem wyświetlanym w bloku (display:block;).

#menu > li > ul > li > a {
  display:block;
  text-decoration:none;
  padding:15px;
  color:#000;
}

Rezultat:

Za pomocą selektora #menu > li > ul > li:hover > a oraz właściwości color:#00F; sprawiamy, że element a w części rozwijanej danego menu CSS będzie posiadał nowy kolor tekstu, gdy najedziemy kursorem myszki na jego element rodzic, czyli element li. Dodatkowo możemy również ustalić nowy kolor tła dla dla wspomnianego elementu a za pomocą właściwości background-color:#F0F0F0; oraz nowe tło obrazkowe za pomocą właściwości background-image oraz funkcji linear-gradient().

#menu > li > ul > li:hover > a {
  color:#00F;
  background-color:#F0F0F0;
  background-image:linear-gradient(#FFF, #EEE, #FFF);
}

Rezultat:

Z pierwszego elementu dziecka li każdego elementu ul usuwamy cień (box-shadow:none;), a do ostatniego elementu dziecka li każdego elementu ul dodajemy nowy cień (box-shadow:0 -4px 4px -4px #AAA, 0 4px 4px -4px #AAA;).

#menu > li > ul > li:first-child {
  box-shadow:none;
}

#menu > li > ul > li:last-child {
  box-shadow:0 -4px 4px -4px #AAA, 0 4px 4px -4px #AAA;
}

Rezultat:

Czas dodać do naszego menu CSS wcześniej poznany mechanizm chowania oraz rozwijania. Dodajemy właściwość display:none; do każdego elementu ul, a następnie dodajemy właściwość display:block; do reguły CSS, która określi wygląd wspomnianego elementu ul, gdy najedziemy kursorem myszki na element rodzic li danego elementu ul.

#menu > li > ul {
  display:none;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

#menu > li:hover > ul {
  display:block;
}

Rezultat:

Do naszego poziomego menu CSS dodajemy wcześniej poznany mechanizm wyświetlenia elementu HTML nad pozostałymi elementami HTML. Do każdego elementu ul dodajemy właściwość position:absolute; która sprawi, że dany element HTML zostanie wyświetlony w pozycji absolutnej. Do każdego elementu ul dodajemy również właściwość z-index:1; która sprawi, że każdy ewentualny element HTML wyświetlony w pozycji relatywnej (position:relative;), znajdujący się niżej w kodzie HTML niż wspomniany element ul, który znajdzie się po wyświetleniu w oknie przeglądarki internetowej w tym samym miejscu co wspomniany element ul wyświetlony w pozycji absolutnej, nie przekryje go swoim obszarem.

#menu > li > ul {
  display:none;
  position:absolute;
  z-index:1;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

Po sprawdzeniu wyglądu naszego rozwijanego poziomego menu CSS możemy dojść do wniosku, że od tej pory szerokość jego części rozwijanych jest zbyt mała (jest ona uzależniona od zawartości danego elementu HTML wyświetlonego w pozycji absolutnej), lecz tym problemem zajmiemy się w krótce, ponieważ musimy poznać (lub przypomnieć sobie z pierwszego działu kursu CSS) pewną zasadę.

Gdy element HTML jest elementem wyświetlonym w pozycji absolutnej położenie takiego elementu HTML możemy kontrolować za pomocą właściwości: top, right, bottom lub left. Przykładowo, gdy dodamy właściwość right:0; do każdego wyświetlonego w pozycji absolutnej elementu ul w naszym poziomym menu CSS to zostanie on wyświetlony najbliżej prawej krawędzi okna naszej przeglądarki internetowej.

#menu > li > ul {
  display:none;
  position:absolute;
  right:0;
  z-index:1;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

Gdybyśmy chcieli w tym momencie dodać właściwość width:100%; do elementów ul, które są wyświetlone w pozycji absolutnej to ich rozmiar szerokości również byłby liczony względem okna przeglądarki internetowej, dlatego wspomniane elementy ul posiadałyby szerokość okna naszej przeglądarki internetowej.

Jeżeli chcemy, aby położenie oraz inne właściwości CSS elementu HTML wyświetlonego w pozycji absolutnej były liczone nie względem okna przeglądarki internetowej, a względem rodzica danego elementu wyświetlonego w pozycji absolutnej, to do elementu rodzica wspomnianego elementu HTML wyświetlonego w pozycji aboslutnej musimy dodać właściwość position wraz z wartością relative, inaczej mówiąc musimy sprawić, aby element rodzic wyświetlonego w pozycji absolutnej elementu HTML stał się elementem wyświetlonym w pozycji relatywnej (position:relative;).

Dodajemy właściwość position:relative; do każdego elementu li, który jest rodzicem elementu ul w naszym rozwijanym poziomym menu CSS.

#menu > li {
  float:left;
  position:relative;
}

Rezultat:

Jak możemy zauważyć od tej pory pozycja elementu ul jest liczona względem jego rodzica li, dlatego po dodaniu właściwości right:0; do elementów ul ich pozycja została wyrównana do prawej krawędzi ich elementu rodzica, czyli elementu li.

Od tej pory, gdy dodamy właściwość width:100%; do elementów ul, ich rozmiar szerokości będzie taki sam jak rozmiar szerokości ich elementu rodzica, czyli elementu li, a nie jak rozmiar szerokości okna danej przeglądarki internetowej. Właściwość right:0; możemy usunąć, bo do niczego już nam nie jest potrzebna.

#menu > li > ul {
  width:100%;
  display:none;
  position:absolute;
  z-index:1;
  margin:0;
  padding:0;
  list-style-type:none;
  background-color:#FFF;
}

Rezultat:

Kod dokumentu HTML tej części kursu CSS został umieszczony poniżej.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      /* ------------------------ POZIOME MENU CSS ------------------------ */
      /* wygląd elementu - ol */
      #menu {
        width:400px;
        margin:0 auto;
        padding:0;
        list-style-type:none;
        background-color:#FDF;
      }

      /* naprawa wysokości elementu - ol */
      #menu:after {
        content:'';
        display:block;
        clear:both;
      }

      /* wygląd elementów - li */
      #menu > li {
        float:left;
      }

      /* pierwszy element - li - elementu o identyfikatorze menu */
      #menu > li:first-child {
        background-color:red;
        width:30%;
      }

      /* drugi element - li - elementu o identyfikatorze menu */
      #menu > li:first-child + li {
        background-color:green;
        width:40%;
      }

      /* trzeci element - li - elementu o identyfikatorze menu */
      #menu > li:first-child + li + li {
        background-color:blue;
        width:30%;
      }

      /* wygląd elementów - a */
      #menu > li > a {
        display:block;
        padding:15px;
        text-decoration:none;
        text-align:center;
        color:#000;
        background-color:#DDD;
        box-shadow:0 0 0 1px #FFF inset;
        background-image:linear-gradient(#FFF 0%, #EEE 30%, #DDD 70%, #FFF 100%);
      }

      /* wygląd elementów - a - po najechaniu kursorem myszki na element - li */
      #menu > li:hover > a {
        color:#00F;
        background-color:#FFF;
        background-image:none;
      }

      /* -------------------- ROZWIJANA CZĘŚĆ MENU CSS -------------------- */
      /* wygląd elementów - li - rodzica każdej części rozwijanej menu CSS */
      #menu > li {
        position:relative;
      }

      /* wygląd elementów - ul */
      #menu > li > ul {
        width:100%;
        display:none;
        position:absolute;
        z-index:1;
        margin:0;
        padding:0;
        list-style-type:none;
        background-color:#FFF;
      }

      /* wygląd elementów - ul - po najechaniu kursorem myszki na element - li */
      #menu > li:hover > ul {
        display:block;
      }

      /* wygląd elementów - li */
      #menu > li > ul > li {
        box-shadow:0 -4px 4px -4px #AAA;
      }

      /* wygląd pierwszego dziecka elementu typu - li */
      #menu > li > ul > li:first-child {
        box-shadow:none;
      }

      /* wygląd ostatniego dziecka elementu typu - li */
      #menu > li > ul > li:last-child {
        box-shadow:0 -4px 4px -4px #AAA, 0 4px 4px -4px #AAA;
      }

      /* wygląd elementów - a */
      #menu > li > ul > li > a {
        display:block;
        text-decoration:none;
        padding:15px;
        color:#000;
      }

      /* wygląd elementów - a - po najechaniu kursorem myszki na element - li */
      #menu > li > ul > li:hover > a {
        color:#00F; 
        background-color:#F0F0F0;
        background-image:linear-gradient(#FFF, #EEE, #FFF);
      }
    </style>
  </head>

  <body>

    <ol id="menu">
      <li><a href="#">link - 1</a>
        <ul>
          <li><a href="#">link - 1</a></li>
          <li><a href="#">link - 2</a></li>
          <li><a href="#">link - 3</a></li>
          <li><a href="#">link - 4</a></li>
          <li><a href="#">link - 5</a></li>
          <li><a href="#">link - 6</a></li>
        </ul>
      </li>
      <li><a href="#">link - 2</a>
        <ul>
          <li><a href="#">link - 1</a></li>
          <li><a href="#">link - 2</a></li>
          <li><a href="#">link - 3</a></li>
          <li><a href="#">link - 4</a></li>
        </ul>
      </li>
      <li><a href="#">link - 3</a>
        <ul>
          <li><a href="#">link - 1</a></li>
          <li><a href="#">link - 2</a></li>
          <li><a href="#">link - 3</a></li>
          <li><a href="#">link - 4</a></li>
          <li><a href="#">link - 5</a></li>
        </ul>
      </li>
    </ol>

  </body>
</html>

W następnej części kursu CSS zwrócimy uwagę na kilka rzeczy, które możemy kontrolować w naszym nowopowstałym poziomym rozwijanym menu CSS.