I am experiencing an issue with my code where multiple animation effects are running simultaneously. Specifically, when I hover over navbarli1 and then move to another li element with the same navbarli1 class, the slide-down effect is not working as expected.
Here is the HTML structure:
<li class="navbarli1">
<div class="liHover">
<a href="" title="">آموزش</a>
<div class="SubMenu">
<ul class="ulsubmenu">
<li>کلاس های حضوری</li>
<li>کلاس های غیر حضوری</li>
</ul>
</div>
</div>
</li>
<li class="navbarli1">
<div class="liHover">
<a href="" title="">فروش تجهیزات</a>
<div class="SubMenu">
<ul class="ulsubmenu">
<li>سخت افزاری</li>
<li>نرم افزاری</li>
</ul>
</div>
</div>
</li>
This is the jQuery code for the animation:
$(".navbarli1").mouseover(function () {
$(".ulsubmenu", this).stop().slideDown("medium");
});
$(".navbarli1").mouseout(function () {
$(".ulsubmenu", this).stop().slideUp("medium");
});