Как при наведении показывать соседний блок и чтобы соседний не исчезал при отведении мыши?

Question

[Вадим Свердлик]

<li class="main-menu__item">
			<a class="main-menu__link" target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
			<svg class="main-menu__svg" width="9" height="6" viewBox="0 0 9 6" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M0.954102 0.826172L4.65962 4.53175L8.36519 0.826172"/>
			</svg>
			<ul class="submenu">
				{% for child in item.children %}
					<li class="submenu__item">
						<a class="submenu__link" href="{{ child.link }}">{{ child.title }}</a>
					</li>
				{% endfor %}
			</ul>
		</li>

так выглядит пункт меню полностью, необходимо сделать, чтобы при наведении на svg class="main-menu__svg"

• показывалось и там будут дочерние пункты меню, у меня это выходит, но когда я веду на появившиеся дочерние пункты ,то оно исчезает так как срабатывает только при наведении на свг, как сделать так чтобы оно не исчезало если курсор уходит от свг к пунктам этим?

Comments

[Ankhena]

Вешать ховер на main-menu__item, а не на svg.
Либо писать js.

[Вадим Свердлик]

Ankhena, а если сделать свг псевдоэлементом main-menu__item, after?

[Ankhena]

Вадим Свердлик, да ради бога. Ховер-то всё равно будет на main-menu__item