Wie schweben dauerhafte Zeit in CSS

Question

a:hover + #menu { 
display: block; 
position: fixed; 

}

Dies ist die CSS für meine schweben zu verlängern, die es eine menu.But anzuzeigen soll verschwindet sofort, wenn ich die Maus ausziehen, was kann ich hier tun ? Wäre es besser, dies durch JS zu tun, und wie würde ich damit umgehen?

Dies ist div für dieses menu.It Teil eines td ist, die einen Teil der Haupttabelle ist, die den Hauptteil der Website

<div id="menu"> 
    <button><a href="#igradesno1">COD WW2</button> 
    <button><a href="#igra2levo">Destiny 2</button> 
    <button><a href="#wolfensteindesno">Wolfenstein</button> 
    <button><a href="#forhonor1">For Honor</button> 
    <button><a href="#fifa182">Fifa 18</button> 



</div> 

Verwendung Opazität ist

Answer 1

Anstelle der Verwendung von display: block und none, versuchen und CSS-Übergänge.

Ich habe eine einfache JSfiddle erstellt

https://jsfiddle.net/3q0v5ufh/