添加<!doctype html>后Div平滑展开过渡效果失效的问题求助

各位大佬，我遇到一个特别奇怪的小问题，想请教一下！我做了个点击展开的菜单，放在div里，还设置了1秒的过渡动画，没加<!doctype html>声明的时候一切正常，过渡丝滑得很，但一加上这个声明，平滑过渡直接没了——不过菜单还是能正常展开收起，就是完全没有动画效果了，感觉肯定是哪里犯了个低级错误😅

下面是页面body部分的代码：

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="javascript:;" onclick="showSubMenu(event)" class="TOCexpand">BIG TITLE</a>
      <ul class="submenu">
        <li class="bookchapter">
          OPTION
          <br>
          <a class="booklink" href="">
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

<script>
  function showSubMenu(e) {
    e.target.parentNode.classList.toggle('active');
  }
</script>

对应的CSS代码如下：

.navigation {
    width: 100%;
    text-align: center;
    margin-bottom:25px;
}

.mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mainmenu a {
    display: block;
}

.mainmenu li.active .submenu {
    display: block;
    max-height: 100%;
}

a.TOCexpand {
    font-family: 'norseregular';
    font-weight: normal;
    font-style: normal;
    color: #e53f3f;
    font-size: 300%;
    text-shadow: 2px 4px 0px #000;
    letter-spacing: 5px;
}

.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 1.00s ease-out;
-moz-transition: all 1.00s ease-out;
-o-transition: all 1.00s ease-out;
-ms-transition: all 1.00s ease-out;
font-family: 'norseregular';
font-weight: normal;
font-style: normal;
}

li.book {
    font-family: 'Noto Serif';
    font-size: 200%;
    margin-top: 25px;
}

li.bookchapter {
    font-family: 'Noto Serif';
    font-size: 200%;
}

a.booklink {
    font-family: 'norseregular';
    font-weight: normal;
    font-style: normal;
    margin-bottom: 33px;
    margin-top: 5px;
    letter-spacing: 5px;
    font-size: 90%;
}

我已经确认问题根源就是<!doctype html>声明，去掉它过渡动画就正常，加回来动画直接失效，有没有大佬知道这是怎么回事呀？

备注：内容来源于stack exchange，提问作者Doctor Chickles