Как создать выпадающее меню, состоящее из двух колонок?

Чтобы создать выпадающее меню с двумя колонками, нужно изменить HTML-структуру и добавить соответствующий CSS. Мы можем использовать вложенные `<div>` для организации ссылок в две колонки.

Вот пример, как это можно сделать:

### Измененный HTML:

```html
<div class="header__bottom-catalog">
    <button class="catalor-menu">Каталог <span><i class="fa-solid fa-bars-staggered"></i></span></button>
    <div class="dropdown-content drop-table">
        <div class="column">
            <a href="http://" target="_blank" rel="noopener noreferrer">Художественная литература</a>
            <a href="http://" target="_blank" rel="noopener noreferrer">Научная литература</a>
            <a href="http://" target="_blank" rel="noopener noreferrer">Историческая литература</a>
            <a href="http://" target="_blank" rel="noopener noreferrer">Поэзия</a>
        </div>
        <div class="column">
            <a href="http://" target="_blank" rel="noopener noreferrer">Фантастика</a>
            <a href="http://" target="_blank" rel="noopener noreferrer">Мистика</a>
            <a href="http://" target="_blank" rel="noopener noreferrer">Биографии</a>
            <a href="http://" target="_blank" rel="noopener noreferrer">Автобиографии</a>
        </div>
    </div>
</div>
```

### Измененный CSS:

```css
/* Drop menu */
.catalor-menu {
    background-color: #F35935;
    padding: 10px;
    border-radius: 5px;
    color: white;
    cursor: pointer; /* Добавляем курсор для кнопки */
}

/* Dropdown content */
.header__bottom-catalog {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none; /* Скрываем выпадающее меню по умолчанию */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 300px; /* Ширина выпадающего меню */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 10px; /* Отступ вокруг колонок */
}

/* Стили для колонок */
.column {
    float: left;
    width: 50%; /* Две колонки */
    padding: 10px;
}

/* Стили для ссылок в выпадающем меню */
.dropdown-content a {
    color: black;
    text-decoration: none;
    display: block; /* Блоковые элементы для ссылки */
    padding: 5px;
}

/* Изменение цвета при наведении */
.dropdown-content a:hover {
    background-color: #ddd;
}

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

### Объяснение кода:

1. **HTML**: Мы добавили две `<div class="column">`, чтобы организовать ссылки в две колонки.
2. **CSS**:
   - Выставили `display: none` для `.dropdown-content`, чтобы скрыть его по умолчанию.
   - Установили `width: 50%` для `.column`, чтобы каждая колонка занимала половину ширины контейнера.
   - Добавили стиль `hover`, чтобы показать выпадающее меню при наведении на кнопку.

Теперь, когда пользователь наведет указатель мыши на кнопку "Каталог", отобразится выпадающее меню с двумя колонками.