Test

<style> .container { display: flex; gap: 1rem; background-color: #1e1e1e; padding: 1rem; font-family: sans-serif; }

.dropdown { position: relative; }

.dropdown-button { background-color: #2c3e50; color: #ecf0f1; border: none; padding: 0.5rem 1rem; cursor: pointer; font-weight: bold; border-radius: 4px; }

.dropdown-content { display: none; position: absolute; background-color: #34495e; color: #ecf0f1; min-width: 160px; border-radius: 4px; margin-top: 0.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); z-index: 1; }

.dropdown-content a { color: #ecf0f1; padding: 0.5rem 1rem; text-decoration: none; display: block; }

.dropdown-content a:hover { background-color: #2c3e50; }

.dropdown:hover .dropdown-content { display: block; } </style>

<button class="dropdown-button">Федерация</button>

<a href="#">Союз Систем</a> <a href="#">Центральное Командование</a> <a href="#">Флот Безопасности</a>

<button class="dropdown-button">Конфедерация</button>

<a href="#">Свободные Колонии</a> <a href="#">Пограничные Миры</a> <a href="#">Совет Старейшин</a>

<button class="dropdown-button">Корпорации</button>

<a href="#">NanoTrasen</a> <a href="#">CyberSun</a> <a href="#">Donk Co.</a>

<button class="dropdown-button">Что-то еще</button>

<a href="#">Независимые</a> <a href="#">Пираты</a> <a href="#">Аномальные Фракции</a>