Горизонтальное выпадающее меню [закрыто]

Вопрос или проблема

.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;
}

<div class="dropdown">
<span style="color: #ff0000;">Упражнение</span>
<div class="dropdown-content"><span style="color: #ff0000;"><a href="#" style="color: #ff0000;">Уровень 1</a></span>
<span style="color: #ff0000;"><a href="#" style="color: #ff0000;">Уровень 2</a></span>
<span style="color: #ff0000;"><a href="#" style="color: #ff0000;">Уровень 3</a></span></div>
</div>

Ответ или решение

Чтобы создать горизонтальное выпадающее меню на основе предоставленного HTML и CSS кода, вам нужно внести некоторые изменения в стили так, чтобы они соответствовали желаемому дизайну. Ниже приведен пример кода, который реализует горизонтальное выпадающее меню, как показано на изображении.

HTML

<div class="dropdown">
    <span style="color: #ff0000;">Exercise</span>
    <div class="dropdown-content">
        <a href="#" style="color: #ff0000;">Level 1</a>
        <a href="#" style="color: #ff0000;">Level 2</a>
        <a href="#" style="color: #ff0000;">Level 3</a>
    </div>
</div>

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 0; /* Удалено боковое заполнение для горизонтального расположения */
    z-index: 1;
    white-space: nowrap; /* Предотвращает перенос строк */
}

.dropdown-content a {
    color: #ff0000; /* Цвет текста */
    padding: 8px 16px; /* Добавлено заполнение для создания кнопок */
    text-decoration: none; /* Удален подчеркивание ссылок */
    display: inline-block; /* Изменяет ссылки на блочные элементы для горизонтального расположения */
}

.dropdown:hover .dropdown-content {
    display: block; /* Показывает меню при наведении */
}

Пояснение:

1. Изменение структуры: HTML-код в целом остался без изменений, однако визуально он приведет к созданию горизонтального меню.

2. Стили CSS:

   • white-space: nowrap; — предотвращает перенос текста, что позволяет элементам оставаться на одной строке.
   • Использован display: inline-block; для элементов <a>, что позволяет выстраивать их в одну линию.
   • Убрано боковое заполнение с .dropdown-content, чтобы избежать ненужного отступа при горизонтальном расположении.
   • Используйте подходящие отступы (padding) для <a> элементов, чтобы сделать их более заметными и интерактивными.

Теперь, когда вы наведете курсор на текст "Exercise", появится горизонтальное меню с уровнями 1, 2 и 3. Убедитесь, что вы протестировали это на веб-странице для обеспечения правильного отображения.