Doctype HTML stoppt die reibungslose Div-Erweiterung ⇐ JavaScript

[Guest]

Ich habe also ein Menü in einem Div. Dieses Div wird beim Klicken erweitert. Es verfügt über eine Übergangsdienstbarkeit von 1 Sekunde. Ohne im Dokument funktioniert es einwandfrei. Das Hinzufügen von stoppt den reibungslosen Übergang (aber er öffnet und schließt sich trotzdem).
Ich habe das Gefühl, dass es etwas wirklich Dummes ist.
Hier ist der Textkörpercode:

Code: Select all

[list]
[*][url=javascript:;]BIG TITLE[/url]


OPTION




[/list]





function showSubMenu(e) {
e.target.parentNode.classList.toggle('active');
}

Und hier ist das CSS.

Code: Select all

.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%;
}

Mir wurde klar, dass es der Doctype war. Wenn man das entfernt, funktioniert es. Wenn Sie es wieder hinzufügen, funktioniert es nicht richtig.