JQuery эффект наведения не запускается при первом наведении

Question

У меня есть меню, которое я хочу анимировать при наведении курсора вниз на подменю.

Проблема в том, что при первом наведении меню не сползает вниз, только на секунду и все это после того, как страница снова инициализируется. В примере кода вы можете увидеть поведение, чтобы увидеть, что первое зависание не вступает в силу, просто нажмите run еще раз. Я прочитал несколько статей здесь, и ни одна из них не имеет смысла для меня, и я не могу относиться ни к одной из них.

Уже несколько часов пытаюсь, поэтому любая помощь или совет приветствуются. Также бонус * подменю на самом деле не сдвигается вверх, но я могу жить с этим ...

$(function () {    
  $('.stranke').hover(function () {
    $('.stranke-d', this).stop(true, true).delay(100).slideDown(300);
  }, function () {
    $('.stranke-d', this).stop(true, true).slideUp(300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<div class="w3-dropdown-hover w3-mobile  stranke">
                <button class="w3-button  meni-divider draw" >STRANKE <i class="fa fa-caret-down"></i></button>
                <div class="w3-dropdown-content w3-bar-block w3-dark-grey meni-round w3-center dropdown-stranke" style="box-shadow:0 6px 15px 0 rgba(0, 0, 0, 0.40), 0 6px 15px 0 rgba(0, 0, 0, 0.40)">
                    <a href="unos-strankep-forma.php" class="w3-bar-item w3-button w3-mobile meni-divider meni-round draw  stranke-d">UNOS NOVE</a>
                    <a href="strankep.php" class="w3-bar-item w3-button w3-mobile meni-divider draw  stranke-d">PRAVNE</a>
                    <a href="strankef.php" class="w3-bar-item w3-button w3-mobile meni-round meni-divider draw  stranke-d">FIZIČKE</a>
                </div>
            </div>

Answer 1

Разница между вашими начальными html и html после первого slideDown / slideUp заключается в том, что после первого раза все элементы имеют style="display: none". Если вы инициализируете html с этим встроенным стилем, он работает с get go.

$(function() {
  $('.stranke').hover(function() {
    $('.stranke-d', this).stop(true, true).delay(100).slideDown(300);
  }, function() {
    $('.stranke-d', this).stop(true, true).slideUp(300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-dropdown-hover w3-mobile  stranke">
  <button class="w3-button  meni-divider draw">STRANKE <i class="fa fa-caret-down"></i></button>
  <div class="w3-dropdown-content w3-bar-block w3-dark-grey meni-round w3-center dropdown-stranke" style="box-shadow:0 6px 15px 0 rgba(0, 0, 0, 0.40), 0 6px 15px 0 rgba(0, 0, 0, 0.40)">
    <a href="unos-strankep-forma.php" class="w3-bar-item w3-button w3-mobile meni-divider meni-round draw  stranke-d" style="display: none">UNOS NOVE</a>
    <a href="strankep.php" class="w3-bar-item w3-button w3-mobile meni-divider draw  stranke-d" style="display: none">PRAVNE</a>
    <a href="strankef.php" class="w3-bar-item w3-button w3-mobile meni-round meni-divider draw  stranke-d" style="display: none">FIZIČKE</a>
  </div>
</div>