Створюємо меню, що випадає на чистому css, css
У сьогоднішній статті я хотів би розповісти, як створити на CSS2.1 і HTML меню, що випадає. Також я покажу один невеликий трюк, за допомогою якого можна буде додавати іконку «+» до елементів навігації в тому випадку, якщо в них приховано меню, що випадає. Для цього ми скористаємося псевдоелементи: only-child.
Вихідний код
демо
Для початку ми створимо базову структуру навігаційного меню, що складається з шести пунктів:
Після застосування стилів у нас повинно вийти щось на зразок цього:
Щоб додати список, що випадає до якого-небудь з елементів HTML меню, нам потрібно додати
- всередину елемента
- для пункту, в якому потрібно приховати список, що випадає:
Ми додали новий невпорядкований список з трьома пунктами списку всередину другого елементу
- , який відповідає за пункт меню WordPress. Зверніть увагу на те, що ми додали
