Горизонтальное раскрывающееся меню [закрыто] ⇐ CSS

[Anonymous]

Создается HTML-ссылка с именем «Упражнение». Теперь я хочу, чтобы кто-то навел курсор на эту ссылку, а затем вместо вертикального раскрывающегося меню появится горизонтальное раскрывающееся меню, как показано на этом изображении:


Каким будет CSS-способ достижения такого дизайна?
Код HTML и CSS приведен ниже:

Код: Выделить всё

.dropdown {

position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}

Код: Выделить всё

Exercise
[url=#]Level 1[/url]
[url=#]Level 2[/url]
[url=#]Level 3[/url]

Подробнее здесь: https://stackoverflow.com/questions/790 ... -down-menu