Здравствуйте, есть выпадающее меню. Субменюшки выпадают и убираются очень быстро, т.е. фактически надо ровно по меню отвести мышку вправо, чтобы субменю не убралось.
Как поставить задержку для выпадающего меню?
Вообще я прописываю
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 -->