Задачка на прокачку: выпадающее меню-2
Придумал новую задачку, по мотивам прошлой. Думаю, будет легко, но весело. Возникнут сложности – начните с первой ;-)
Задачка на прокачку — это небольшое упражнение на знание CSS с соблюдением ограничений. Если вы не решали предыдущую задачку, рекомендую начать с неё. Там тоже нужно сделать выпадающее меню, но условие проще.
Содержание
Что нужно
Сверстайте выпадающее меню, как на гифке.
При наведении на кнопку, появляется меню второго уровня. Между кнопкой и меню расстояние 80 пикселей.
Отличие от прошлой задачки: под кнопкой меню появился текст.
Чего нельзя
Запрещается править HTML. Нельзя использовать Javascript, даже если очень хочется; он тут не нужен. Не стоит править существующие стили в CSS. Они даны, чтобы облегчить работу с подбором нужных цветов, рамок и ховеров.
Допишите стили, чтобы добиться требуемого результата.
Решение
Не публикуйте вариант кода прямо в комментариях. Размещайте свой вариант на jsfiddle.net и публикуйте ссылку.
Сначала комментарии не будут отображаться, дабы избавить вас от искушения подсмотреть. К концу недели опубликую присланные решения и отмечу лучший. Если понадобится, покажу свой вариант.