Delay "unhover" action

#login-panel-ghost {
  display: none;
  transition-delay: 2s;
}
.top-menu-login:hover #login-panel-ghost {
  display: block;
  position: fixed;
  width: 250px;
  height: 180px;
  transition-delay: 2s;
}

<span class="top-menu-login">Login
  <div id="login-panel-ghost">
    <h2>Log in!</h2>
    <form>
      <input type="text" placeholder="Username">
    </form>
  </div>
</span>

Now, let me explain what I would like to accomplish: I've a span .top-menu-login which will be displayed as a phrase, in this case "Login". Furthermore, the div #login-panel-ghost is originally hidden, but when the mouse passes over "Login" the div should appear.

I managed to do that, the problem is that I would like to delay the element disappearing after the mouse unhovers the "Login"!

I've tried this code so far, that I found on Stack Overflow, but I think the fact that the hover changes another div is causing trouble.

P.S. I know it should be easy with JavaScript, but I'd like to try without it!