Quiero aplicar el retraso en la salida del mouse en CSS

Solución:

Puede agregar un retraso a una transición, la sintaxis es la siguiente:

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

Entonces

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

La sintaxis es la misma para todas las versiones con prefijo también.

He creado una demostración de esto, porque necesitas hacer algo un poco complicado para que el artículo aparezca sin demora, pero demora antes de que desaparezca.

http://jsfiddle.net/pgqM2/

El truco consiste en redefinir la transición para agregar el retraso de 3 segundos cuando no hay desplazamiento, pero para tener un retraso de 0 cuando hay un desplazamiento:

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

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

Hay un transition-delay propiedad en CSS. Simplemente agregue esto a su código y obtendrá el efecto deseado.

transition-delay:3s;

A los efectos de las propiedades de transición abreviadas, aquí hay una imagen que lo resume

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>