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

Question

[Slash]

Доброе утро.
Есть теги, в виде кнопок, которые выбираются кликом мыши. Так же, при наведении курсора на тег (В редакторе текста), сразу появляется меню тега (Удалить | Редактировать). Хочу сделать задержку появления меню, чтобы оно появлялась не сразу, как наведут курсор, а скажем, через 0.4 секунды.

Класс меню выглядит так:

.categoryTag {
	position: relative;
}

.categoryMenu {
	border: 1px solid #999999;
	background-color: white;
	display: none;
	position: absolute;
	left: 0;
	bottom: 25px;
	padding: 5px;
}

.categoryTag:hover .categoryMenu {
	display: block;
}

.categoryMenu a {
	color: #000000;
	padding: 8px 10px 8px 10px;
	display: block;
}

.categoryMenu a:hover {
	background-color: #DDDDDD;
}

Подскажите, как можно сделать задержку появления?
Спасибо.

Answer 1

[DIVSIDE]

Лучше конечно делать на js и добавлять класс active через нужный промежуток времени. На js это более красиво и эстетично чтоль... Но если надо css, то вот так:

С процентами и временем уж сами.

Comments

[Slash]

JS тут не помогает. Меню не исчезает, тк блок categoryMenu, находится внутри блока categoryTag.

[DIVSIDE]

Slash, тогда песочница в моём ответе то, что тебе нужно. Иначе никак

[DIVSIDE]

Slash, а ну отмечай решением

[Slash]

DIVSIDE, я как буду у своего компа, после работы, проверю и конечно отмечу!

Сейчас на работе, проверить не могу.

Спасибо.

[Slash]

DIVSIDE, отметил.