Doctype HTML stops smooth div expansion – Blancer.com Tutorials and projects

So I have a menu inside a div. That div expands on click. It has a transition easement on it of 1second. It works perfectly fine without <!doctype html> in the doc. Adding <!doctype html> stops the smooth transition (but it still opens and closes).

I feel like it’s something really stupid.

Here is the body code:

<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>

And here is the 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%;
}

I realized it was the doctype. Removing that makes it work. Adding it back makes it not work properly.