Чтобы показать подменю при наведении курсора на элемент меню "О федерации", вам необходимо использовать селектор `:hover` в CSS. Предполагая, что у вас есть HTML структура подобная этой:
```html
<ul class="main-menu">
<li class="menu-item">
<a href="#">О федерации</a>
<ul class="submenu">
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
<!-- другие подпункты -->
</ul>
</li>
<!-- другие пункты меню -->
</ul>
```
Вы можете добавить следующий CSS код:
```css
/* Скрываем подменю по умолчанию */
.main-menu .submenu {
display: none;
}
/* Отображаем подменю при наведении курсора на пункт меню */
.main-menu .menu-item:hover .submenu {
display: block;
}
```
Если у вас другая структура HTML или классы, вам потребуется соответственно изменить селекторы в CSS. Важная часть здесь — это использование селектора `:hover` на родительском элементе, чтобы изменить стили дочернего элемента (в данном случае скрытого подменю).
Убедитесь, что у вас нет других CSS правил, которые могут конфликтовать с этими и предотвратить показ подменю. Например, если для подменю применён инлайновый стиль с `display: none;` или другой селектор с более высоким приоритетом, который устанавливает `display: none;`, то подменю не будет отображаться. В таких случаях вам возможно понадобится использовать `!important`, чтобы переопределить эти правила, хотя использование `!important` может быть плохой практикой и его следует избегать, если это возможно:
```css
.main-menu .menu-item:hover .submenu {
display: block !important;
}
```
Помните, что CSS читается сверху вниз, и правила, определённые позже, переописывают предыдущие при равенстве специфичности. Убедитесь, что ваше правило `:hover` имеет достаточную специфичность, чтобы переопределить другие возможные правила.