0

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

$(document).ready(function() {
  $("#menusdr > ul > li > *").hover(function() {
    $("#menusdr > ul > li > ul").stop().slideUp("slow");
    $(this).find("~ ul").stop().slideToggle("slow");
  });
});
#menusdr > ul > li > ul {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menusdr">
        <p class="menup">Меню</p>
        <ul>
            <li><a href="#">Главная</a></li>
          <li><a href="#">Уроки</a>
          <ul>
            <li><a href="#">Жизнь первобытных людей</a></li>
            <li><a href="#">Древний Восток</a></li>
            <li><a href="#">Древняя Греция</a></li>
            <li><a href="#">Древний Рим</a></li>
          </ul>
          </li>
          <li><a href="#">Видео</a></li>
          <li><a href="#">Тесты</a></li><br>
          <li><a href="#">Обратная связь</a>
          <li><a href="#" id="close-program">Закрыть</a></li>
        </ul>
    </div>

1 ответ 1

0

#menusdr > ul > li > ul {
  display: block;
  transition: all 300ms;
  height:0;
  overflow: hidden;
}

#menusdr > ul > li:hover > ul {
  display: block;
  opacity: 1;
  height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menusdr">
        <p class="menup">Меню</p>
        <ul>
            <li><a href="#">Главная</a></li>
          <li><a href="#">Уроки</a>
          <ul>
            <li><a href="#">Жизнь первобытных людей</a></li>
            <li><a href="#">Древний Восток</a></li>
            <li><a href="#">Древняя Греция</a></li>
            <li><a href="#">Древний Рим</a></li>
          </ul>
          </li>
          <li><a href="#">Видео</a></li>
          <li><a href="#">Тесты</a></li><br>
          <li><a href="#">Обратная связь</a>
          <li><a href="#" id="close-program">Закрыть</a></li>
        </ul>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.