I Want To Apply Delay On Mouse Out in css

There is a transition-delay property in CSS. Simply add this to your code, and you will get the desired effect.

transition-delay:3s;

For the purpose of shorthand transition properties, here is a picture that sums it up

So in your case it would look like this

div:hover {
  -webkit-transition: .5s ease-in-out 3s;
  -moz-transition: .5s ease-in-out 3s;
  -o-transition: .5s ease-in-out 3s;
  transition: .5s ease-in-out 3s;
  color: red;
  cursor: pointer;
}

<div>Hover me. There is a delay!</div>

Here is a fiddle to demonstrate

You cant use css transition when using display none, only solution with display none is js.

You can add a delay to a transition, the syntax is as follows:

transition: all 0.5s ease-in-out 3s;

So

transition: <property> <duration> <timing-function> <delay>;

The syntax is the same for all the prefixed versions also.

I have created a demo of this, because you need to do something a bit tricky in order to make the item appear with no delay, but delay before it goes.

http://jsfiddle.net/pgqM2/

The trick is to re-define the transition to add the 3s delay when there is no hover, but to have a 0s delay when there is a hover:

li ul {
    opacity: 0;
    transition: all 0.5s ease 3s;
}

li:hover ul {
    opacity: 1;
    transition: all 0.5s ease 0s;
}