Задача – сделать выпадающее меню на CSS

Задачка на прокачку: выпадающее меню

Задачка на прокачку — это небольшое упражнение на знание CSS. Времени на решение много не уйдёт, а размяться поможет. Главное условие — соблюдать ограничения. Надеюсь, вам понравится.

Главная » Задачка на прокачку » Задачка на прокачку: выпадающее меню

Задачка на прокачку — это небольшое упражнение на знание CSS. Времени на решение много не уйдёт, а размяться поможет. Главное условие — соблюдать ограничения. Надеюсь, вам понравится.

Что нужно

Сверстайте выпадающее меню, как на гифке.
CSS Задача выпадающее меню

При наведении на кнопку, появляется меню второго уровня. Между кнопкой и меню расстояние 80 пикселей.

Меню должно не только появляться, но и работать. При клике на первый или второй пункт выпадающего меню, пользователь должен попасть на прописанную в ссылке страницу.

Используйте исходники HTML и CSS, представленные ниже и допишите свои стили.

Чего нельзя

Запрещается править HTML. Нельзя использовать Javascript, даже если очень хочется; он тут не нужен. Не стоит править существующие стили в CSS. Они даны, чтобы облегчить работу с подбором нужных цветов, рамок и ховеров.

Представьте, что фон меняется каждый день: сейчас серый, завтра розовый, а послезавтра в качестве фона будет видео. Так что расстояние между кнопкой и выпадающим меню должно быть прозрачным.

Решение

Оставляйте ссылку на свой вариант решения в комментариях. Сначала они не будут отображаться, дабы избавить вас от искушения подсмотреть. К концу недели я открою доступ ко всем присланным решениям и покажу свой вариант.