For hide menu bar on roundcube elastic template and showed only when mouse is hover

roundcube_menuhover.css

.menu .button.about{
  display: none!important}
@media screen and (min-width: 481px){
  .menu .popover-header img{
    display:none}
  .menu .popover-header{
    width:0;
    height:0!important;
    min-height:0!important}}
@media screen and (min-width: 1025px){
  .menu{
    width:.2rem!important}
  .menu:hover{
    width:2.5rem!important}
  #taskmenu .special-buttons{
    position: unset;
    bottom: initial;
    left: initial;
    background-color: transparent}
  #taskmenu a{
    width:54px!important;
    margin-left:-19px;
    height:initial}
  #taskmenu a .inner{
    display:none}}
@media screen and (min-width: 481px){
  #taskmenu .selected.button{
    color:#37beff}}
/* MOD for color menu */
@media screen and (min-width: 481px){
  #taskmenu .button.compose{
    color:#80ff00}
  #taskmenu .button.compose:hover{
    color:#c5ff89}
  #taskmenu .button.addressbook.selected{
    color:#ffc90e}
  #taskmenu .button.settings.selected{
    color:#aeaeae}}