Плавное появление меню не работает

Не работает плавность меню. То есть при наведении не выезжает или появляется плавно.

#menu {  
 list-style: none;
 padding: 0;
 margin: 0; 
 font-family: inherit;
 font-size: 14px;
 z-index: 4;
 position: relative;
 display: table-row;

}
#menu li{
 position:relative; 
 display: table-cell;
 float: none;
 margin: 0;
 text-align: center; 
 visibility: visible;
}

#menu li:last-child {
 border: 0 none; 
}

#menu li a {
 display: block;
 color: #fdfdfd;
 text-decoration: none;


  }

#menu li:hover { 
 background: #384048;
opacity: 1;
}

#menu li ul li {        
 float:none;       
 width:250px;   
 display: block;
 background: #4B5560;
 margin: 0;
 padding: 0;
 text-align: left;
 border: 0 none;
}


#menu li ul li a {
 color: #f7f7f7;
 padding: 10px;
 border-bottom: 1px solid #444d56;
}

#menu li ul li:hover { 
 background:#384048;
 text-decoration: none;
 color: #f7f7f7;
}

#menu li ul li ul li:hover { 
 background:#384048;
 text-decoration: none; 
}

#menu li ul li ul {        
 margin-left: 2px;
}

#menu li ul{
 display:none;
 position:absolute;
 background-color:#4d2001;
 list-style:none;
 padding:0;
 z-index: 5;
}
#menu li:hover ul{   
 display:block; 
visibility: hidden;
opacity: 1; 
transition: all 0.6s;}

#menu li ul li ul,      
#menu  li:hover ul li ul{    
 display:none;
 position:absolute;
 left:250px;
 top:0;
}

#menu li ul li:hover ul{
 display:block;
}

#menu li:hover a {
 color: #f7f7f7;

  }

#menu li:hover > ul li a {
 color: #f7f7f7;
}

#menu li > a:after { 
 font-family: 'FontAwesome';
 color: #f7f7f7;
 content: '\f0d7';
 font-size: 16px;
} 

#menu li > a:only-child:after {
 content: '';
}   

#menu li ul li > a:after {
 color: #f7f7f7;
 content: '';
} 

#menu li:hover > a:after {
font-family: 'FontAwesome';
 content: '\f0d7';
 color: #f7f7f7;
 font-size: 16px;
}

#menu li:hover > a:only-child:after {
 content: '';
}   

#menu li ul li:hover > a:after {
 content: '';
} 

#menu ul ul li:first-child > a:after {
 position: absolute;
 left: -6px;
 top: 50%;
 margin-top: -6px;
 border-left: 0; 
 border-bottom: 6px solid transparent;
 border-top: 6px solid transparent;
 border-right: 6px solid #fff;
}
<ul id="menu" >
  <li class="active">
    <a href="/">
      Меню
    </a>
  </li>
  <li>
    <a href="#">
      Меню 1
    </a>
    <ul class="dropforum">
     <li><a href=""> Меню</a></li>
     <li><a href=""> Меню</a></li>
     <li><a href=""> Меню</a></li>
     <li><a href=""> Меню</a></li>
     <li><a href=""> Меню</a></li>
    </ul>
  </li>
</ul>

    


Ответы (0 шт):