当单击菜单时，应用过渡效果来减慢子菜单的打开速度

以下是如何使用CSS transition和max-height 的示例

需要注意的是，由于不能使用height: auto制作高度动画，因此使用max-height。使其工作的诀窍是将其设置为一个始终大于实际菜单列表的值。

我在下面的例子中使用了400px，通过改变这个和持续时间，可以非常接近完美的动画。

function showmenu(event,elem) {
  // Clear any currently open menu
  var elementClicked = event.target;           
  if (elementClicked.className != 'sectionMenu')
    return;
  var openMenu = document.getElementById("activeMenu");
  if (openMenu) {
    openMenu.removeAttribute("id");
    // Stop if we're just closing the current menu
    if (openMenu === elem) {
      return;
    }
  }
  // Only apply it if the element actually has LI child nodes.
  // OPTIONAL: Will still work without if statement.
  if (elem.getElementsByTagName("li")) {
    elem.setAttribute("id", "activeMenu");
  }                      
}
function focusStyle(event,elem) {
  if (document.getElementById("anchor") != null) {
    document.getElementById("anchor").removeAttribute("id");
  }
  var anchorClicked = event.target;
  if (elem.getElementsByTagName("li")) {
    elem.setAttribute("id", "anchor");
  }
}

div {
  height: 100%;
}
nav{
  height:100%;
}
#nav1 {
  background-color:	#ffffff;
  height: 100%;      
  cursor: pointer;
}
ul {
  padding-left: 0px;
  margin-bottom: 0px;        
  font-weight:400;
  font-size:14px;
  letter-spacing:0;        
}
ul li {   
  line-height:30px;   
  position: relative;
  color:#ff6a00;
}
ul li:hover {
  background-color: #00ff21;
}
#main-menu > li.active > a {
  color: #b6ff00;
  background-color: #F4F4F4;
}
nav #nav1 #activeMenu .sectionMenu{
  background-color: rgb(69,199,77);        	
}
ul li a{
  padding: 0.5em 1.25em 0.5em 3.125em;
  font-weight: 500;
  display: block;
  color:#585858;
  padding-left:50px;     	
}
ul li a i {
  position: absolute;
  right: 20px;
  font-size:1.5em; 
}  
ul ul {
  transition: max-height 0.5s ease-out;
  max-height: 0;
  overflow: hidden;
}
ul ul li a {
  color: #7f7f7f;
  padding: 0.875em 1.25em 0.875em 0.625em;
  font-weight: 500;
  display: block;
  height: 1.875em;  
}
#activeMenu ul {
  max-height: 400px;
}
li.sectionMenu:before {
  /*content: ''2795'; 
  content: ''1401'; 
  content: ''2206'; */     
  height:10px;
  font-weight:20px;
  font-size: inherit;
  color: #000000;
  text-rendering:auto;
  float: right;
  display:inline-block;
  padding-right:25px; 
}
#activeMenu {
  background-color: #ffffff;     
}
#anchor {
  background-color:#e7e7e7;
}
ul li ul li{
  padding-left:80px;
}
ul ul li a i {
  padding-right:123px;
}
#buildIcon{
  right: 190px;     
}
span{
  float:right;
}
ul ul li i {
  visibility:hidden;
}

<ul id="nav1">
  <li onclick="showmenu(event,this)" class="sectionMenu dropdown">
    <a class="sectionMenu">   
      Class !
    </a>
    <ul>
      <li> <a>                              
        A
        </a>
      </li>
      <li class="active-class"  >
        <a>
          b
        </a>
      </li>
      <li class="active-class" >
        <a >
          c
        </a>
      </li>
      <li class="active-class" >
        <a>
          d
        </a>
      </li>
    </ul>
  </li>
  <li onclick="showmenu(event,this)" class="sectionMenu dropdown">
    <a class="sectionMenu">                    
      Class  II
    </a>
    <ul>
      <li  class="active-class"> <a>1</a> </li>
      <li  class="active-class"> <a>2 </a></li>
      <li  class="active-class"> <a>3</a> </li>
      <li  class="active-class"> <a>4 </a></li>
      <li  class="active-class"> <a>5 </a></li>
      <li  class="active-class"> <a>6</a> </li>
    </ul>
  </li>
  <li onclick="showmenu(event,this)" class="sectionMenu dropdown">
    <a class="sectionMenu">                    
      Class  III
    </a>
    <ul>
      <li  class="active-class"> <a>1 </a></li>
      <li  class="active-class"> <a>2 </a></li>
      <li  class="active-class"> <a> 3 </a></li>
      <li  class="active-class"> <a>4 </a></li>
      <li  class="active-class"> <a>5 </a></li>
      <li  class="active-class"> <a>6 </a></li>
    </ul>
  </li>
</ul>