Rozwijane menu

pytanie zadane 3 maja 2023 w HTML i CSS przez HUBSON2912 Obywatel (1,300 p.)

Witam,

piszę stronkę, w której chcę zrobić lepsze menu - rozwijanie i przyklejanie do góry ekranu. Wzorowałem się na kursie CSS z YouTube z kanału Pasja Informatyki link. Autor robił przyklejanie dzięki JQuery, a ja dzięki:

position: sticky;
position: -webkit-sticky;

Rozwijanie jednak nie do końca działa. Gdy najadę zwiększa się cały div z menu, zrzuty ekranu: link. Co powinienem zrobić aby wyglądało to mniej więcej tak: link (screen z kursu)?

Kod HTML: link

Kod CSS: link

Z góry dzięki za pomoc.

1	komentarz 3 maja 2023 przez Comandeer Guru (600,810 p.) Wrzuciłem kod na CodePena, żeby lepiej było widać problem: https://codepen.io/Comandeer/pen/gOBXgOw Zachęcam na przyszłość do używania go – jest zdecydowanie wygodniejszy, niż wrzucone osobno kody HTML i CSS.

komentarz 3 maja 2023 przez HUBSON2912 Obywatel (1,300 p.)

Nie znałem tego narzędzia więc dzięki.

1 odpowiedź

odpowiedź 3 maja 2023 przez Comandeer Guru (600,810 p.)
wybrane 3 maja 2023 przez HUBSON2912

Najlepsza

Wystarczy ustalić dla menu wysokość, np. dorzucając do ol styl max-height: 40px. Wówczas rozwijane menu będzie domyślnie wystawać.

BTW polecam stylować przy pomocy klas, bo obecnie zmieniłeś style dla wszystkich list na stronie – a na 95% kiedyś będziesz mieć też inne listy na niej i tego typu globalne style będą przeszkadzać. Na ten moment najlepsza praktyka to używanie wyłącznie klas do stylowania.