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

Question

[Павел Инки]

Привет всем,
подскажите пожалуйста, как можно реализовать выпадание подменю через пару секунд на JS или CSS.

Вот структура меню:

/*Обнуляем отступы*/
ul, li {
    margin:0;
    padding:0;
    list-style-type:none;  
}
/*Задаём параметры блока, содержащего основное меню*/
.app-vertical-menu {
    display:block;
}
/*Задаём стили для разделов нашего меню*/
.app-vertical-menu > li {
    display:inline-block;
    position:relative;
}
/*Стили для скрытого выпадающего меню*/
.app-vertical-menu > li > ul {
    display:none;  
}
/*Делаем скрытую часть видимой*/
.app-vertical-menu > li:hover > ul {
    display:block; 
}
.app-vertical-menu > .active > ul {
    display:block; 
}

<ul class="app-vertical-menu">
	<li class="">
		<div class="app-vertical-menu-main"><a title="Внутреннее освещение" href="catalog_action_1_4.htm">Внутреннее освещение</a><span class=""></div>

			<ul class="app-vertical-menu-submain">
				<li class="app-vertical-menu-sub"><a href="/">Встраиваемые светильники</a></li>
				<li class="app-vertical-menu-sub"><a href="/">Лампы и компоненты</a></li>
				<li class="app-vertical-menu-sub"><a href="/">Подвесные светильники</a></li>
				<li class="app-vertical-menu-sub"><a href="/">Пристраиваемые светильники</a></li>
				<li class="app-vertical-menu-sub"><a href="/">Светильники направленного света</a></li>
				<li class="app-vertical-menu-sub"><a href="/">Трековые светильники</a></li>
			</ul>
	</li>
</ul>

Нужно, что бы при наведении на li основного UL.app-vertical-menu выпадающее скрытое меню - app-vertical-menu-submain появилось не сразу (как это при hover) а через 2 секунды.

Нашел в интернете возможное решение - setTimeout(function() {}, 2000); ну как его реализовать, не знаю.

Answer 1

[Artem]

transition: all .4s ease-out;
transition-delay: 2s;

Comments

[Алим Алибаев]

Павел Инки Это решение)

[Павел Инки]

Алим Алибаев: а к какому элементу эти свойства прописывать?

[Павел Инки]

Artem : Вот в моей структуре к чему прописывать это свойство? Подскажите пожалуйста

Answer 2

[Сергей Мельников]

jsbin.com/zinoba/3/edit?css,output

jsbin.com/jaqabu/1/edit?css,output

Comments

[Павел Инки]

Сергей Мельников Супер, оно. Но у меня горизонтальное меню, и из-за position:absolute выпадающее меню налазит на пункты меню снизу. Как же сделать что бы выпадающее меню "подвигало" нижние подпункты

Answer 3

[kstyle]

setTimeout - это javascript.
средствами CSS - это анимация. начните со статьи habrahabr.ru/company/nordavind/blog/209462