1

Здравствуйте, есть выпадающее меню. Субменюшки выпадают и убираются очень быстро, т.е. фактически надо ровно по меню отвести мышку вправо, чтобы субменю не убралось.

Как поставить задержку для выпадающего меню?

Вообще я прописываю

transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-moz-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;

для menu ul li .submenu но это не срабатывает. Не срабатывает вообще ни для какого класса.

html,
* {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  background: #eee;
}

a {
  text-decoration: none;
}

.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  display: block;
  background: #fff;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu ul li {
  display: block;
  border-bottom: #ccc 1px solid;
  /*position: relative;*/
}

.menu ul li a {
  display: block;
  color: #000;
  padding: 5px;
}

.menu ul li.active>a,
.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #ccc;
}

.menu ul li .submenu {
  display: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
  /* вот здесь я указываю задержку */
  transition: all 0.5s ease 0.5s;
  -webkit-transition: all 0.5s ease 0.5s;
  -moz-transition: all 0.5s ease 0.5s;
  -o-transition: all 0.5s ease 0.5s;
}

.menu ul li:hover>.submenu {
  display: block;
}
<div class="menu">
  <ul>
    <li><a href="#">Sample</a></li>
    <li class="active"><a href="">Sample</a>
      <ul class="submenu submenu1">
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li class="active"><a href="">Sub</a>
          <ul class="submenu submenu2">
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li class="active"><a href="">Sub</a>
              <ul class="submenu submenu3">
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li class="active"><a href="">Sub</a></li>
              </ul>
              <!--// Inner Child 3 -->
            </li>
            <li><a href="#">Sub</a></li>
          </ul>
          <!--// Inner Child 2 -->
        </li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
      </ul>
      <!--// Inner Child 1 -->
    </li>
    <li><a href="#">Sample</a></li>
    <li><a href="#">Sample</a></li>
    <li class="active"><a href="#">Sample</a>
      <ul class="submenu submenu3">
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
      </ul>
    </li>
  </ul>
</div>
<!--// end .menu -->

1
  • для display: none анимация не работает
    – soledar10
    9 июн 2017 в 7:42

1 ответ 1

2

Можно так

html,
* {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  background: #eee;
}

a {
  text-decoration: none;
}

.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  display: block;
  background: #fff;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu ul li {
  display: block;
  border-bottom: #ccc 1px solid;
  /*position: relative;*/
}

.menu ul li a {
  display: block;
  color: #000;
  padding: 5px;
}

.menu ul li.active>a,
.menu ul li a:hover {
  text-decoration: none;
  color: #fff;
  background: #ccc;
}

.menu ul li .submenu {
  opacity: 0;
  z-index: -1;
  position: absolute;
  width: 0;
  min-height: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
  /* вот здесь я указываю задержку */
  transition: all 0.5s ease 0.5s;
  -webkit-transition: all 0.5s ease 0.5s;
  -moz-transition: all 0.5s ease 0.5s;
  -o-transition: all 0.5s ease 0.5s;
}

.menu ul li:hover >.submenu {
  opacity: 1;
  z-index: 1;
  width: 100%
}
<div class="menu">
  <ul>
    <li><a href="#">Sample</a></li>
    <li class="active"><a href="">Sample</a>
      <ul class="submenu submenu1">
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
        <li class="active"><a href="">Sub</a>
          <ul class="submenu submenu2">
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li><a href="#">Sub</a></li>
            <li class="active"><a href="">Sub</a>
              <ul class="submenu submenu3">
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li class="active"><a href="">Sub</a></li>
              </ul>
              <!--// Inner Child 3 -->
            </li>
            <li><a href="#">Sub</a></li>
          </ul>
          <!--// Inner Child 2 -->
        </li>
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
      </ul>
      <!--// Inner Child 1 -->
    </li>
    <li><a href="#">Sample</a></li>
    <li><a href="#">Sample</a></li>
    <li class="active"><a href="#">Sample</a>
      <ul class="submenu submenu3">
        <li><a href="#">Sub</a></li>
        <li><a href="#">Sub</a></li>
      </ul>
    </li>
  </ul>
</div>

3
  • Насколько я понимаю, теперь можно регулировать с помощью transition?
    – evans
    9 июн 2017 в 8:21
  • Да, теперь все регулируется через transition 9 июн 2017 в 8:33
  • подскажите как решить проблему с: если навести на область рядом справа от menu (просто рядом, а не на Sample), то меню все равно выезжает
    – evans
    9 июн 2017 в 13:13

Ваш ответ

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

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