Rozwijane listy menu

Question

Witam,

Mam problem z rozwijanym menu (właściwie nigdy nie była to moja dobra strona). Problem polega na tym że chciałbym dodać 2 rozwijane kafelki pod kafelkiem "Pętle" w rozwijanej zakładce "Podstawowe funkcje". Już od dłuższego czasu nad tym siedzę i nie mam pojęcia jak to zdefiniować w CSS, tak by hover kafelka Pętli rozwijał dodatkowe 2 kafelki "While" i "For". Wiem że kod może być trochę nieczytelny, ale to jedna z moich pierwszych stron, którą dopiero zaczynam tworzyć więc z góry przepraszam za bałagan i nieczytelność.

Kod strony: https://codepen.io/LYSYyy/pen/NYPzEE

Gdyby coś było niejasne to proszę pytać i oczywiście z góry bardzo dziękuję za pomoc :)

Answer 1

Nie przepraszaj za nieczytelność kodu, tylko skoro już wiesz, że jest nieczytelny to staraj się go poprawić :)

Spójrz:

ol > li > ul > li:hover > a
{
	color: #0a2b42;
}

prawidłowo te selektory powinny mieć swoje klasy, żeby uniknąć takiego zagnieżdżania.
Jeśli Twoje <li> oraz w nich <a> mają takie same style to proponowałabym dać po prostu klasę ogólną dla każdego <li> np menu-item i dla <a> menu-link i wtedy Twój kod wyglądałby tak: 

.menu-link {
   color: #0a2b42;
}

co jest sporo łatwiejsze to rozgryzienia niż ten kod podany wyżej :)
Więc bardzo polecam pododawać klasy i po nich stylować (nie po selektorach i nie po id).

Dodatkowo nie używaj tutaj <ol> bo nigdzie nie masz chyba ponumerowanej listy, to po prostu są <ul>.

A co do Twojego problemu to:

<li><a>Pętle</a></li>
     <ol>
          <li><a href="#">While</a></li>
          <li><a href="#">For</a></li>
      </ol>

źle zamknąłeś tag <li> - powienien być po tagu </ol> i dalej już chyba powinieneś sobie poradzić, skoro udało Ci się zrobić już takie rozwijane menu :) Tak w ogóle to kolejne elementy mają być pod napisem "Pętle" pokazywane, czy obok?

Comments

Bardzo dziękuję za pomoc!

Nie przepraszaj za nieczytelność kodu, tylko skoro już wiesz, że jest nieczytelny to staraj się go poprawić :)

Tak jak pisałem ciągle pracuję nad tym kodem :)

źle zamknąłeś tag <li> - powienien być po tagu </ol>

Zabawna sytuacja, gdy tworzyłem te menu (jeszcze bez tej rozwijanej pętli) to popełniłem ten sam błąd ;)

Tak w ogóle to kolejne elementy mają być pod napisem "Pętle" pokazywane, czy obok?

No właśnie chciałbym raczej spowodować by elementy te były wyświetlane obok listy np. po prawej stronie. Próbowałem się z tym bawić ale średnio mi to ostatecznie wyszło więc w tej kwestii także proszę o pomoc.

---

to w tym przypadku chyba najłatwiej po prostu to wypozycjonować w CSS. Do limenu2 masz już dodane "position: relative" więc teraz wystarczyłoby dać dla ulmenu2 "position: absolute" + szerokość  na 100% i sobie je ustawić odpowiednio z prawej strony :)

Ukrywanie i pokazywanie tej listy już masz załatwione więc tak, jak napisałam tylko to pozycjonowanie zostało. Proszę artykuł może coś Ci pomoże, jak jeszcze nie miałeś z tym do czynienia.

---

I ponownie dziękuję za pomoc i artykuł (ładnie wyjaśnia pozycjonowanie elementów).

Wydaje mi się, że osiągnąłem już zamierzony cel :)

---

super!
nie ma za co i w takim razie powodzenia dalej :)