Добрый день!
Для создания вертикального меню с эффектом скрытия подменю при наведении курсора вы можете рассмотреть несколько вариантов:
1. **CSS и HTML**: Если вам нужно небольшое и простое решение, вы можете сделать это с помощью CSS. Вот пример кода:
```html
<style>
.menu {
list-style: none;
padding: 0;
width: 200px;
}
.menu-item {
position: relative;
}
.submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
list-style: none;
padding: 0;
background: #fff;
border: 1px solid #ccc;
}
.menu-item:hover .submenu {
display: block;
}
</style>
<ul class="menu">
<li class="menu-item">Пункт 1
<ul class="submenu">
<li>Подпункт 1.1</li>
<li>Подпункт 1.2</li>
</ul>
</li>
<li class="menu-item">Пункт 2
<ul class="submenu">
<li>Подпункт 2.1</li>
<li>Подпункт 2.2</li>
</ul>
</li>
</ul>
```
2. **jQuery**: Если вам нужно более интерактивное решение с анимацией, вы можете использовать jQuery:
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.menu-item').hover(
function() {
$(this).find('.submenu').stop(true, true).slideDown(200);
},
function() {
$(this).find('.submenu').stop(true, true).slideUp(200);
}
);
});
</script>
```
3. **Плагины для WordPress**: Если вы используете WordPress, попробуйте такие плагины, как:
- **Max Mega Menu**: Очень мощный инструмент для создания многоуровневых меню.
- **WP Responsive Menu**: Хороший плагин, который предоставляет дополнительные настройки для меню.
4. **Плагины для других платформ**: Если вы используете другую платформу, попробуйте поискать плагины на официальном сайте вашей платформы (например, GitHub, кодексы и т.д.) с запросами на вертикальное меню с подменю.
Надеюсь, одно из предложенных решений вам поможет! Если нужны более конкретные рекомендации, дайте знать, на какой платформе вы работаете!