Doctype HTML останавливает плавное расширение div ⇐ CSS

[Anonymous]

Итак, у меня есть меню внутри div. Этот div расширяется при нажатии. На нем установлен переходный сервитут в 1 секунду. Он отлично работает без в документе. Добавление останавливает плавный переход (но он все равно открывается и закрывается).
Мне кажется, что это действительно глупо.
Вот это код тела:

Код: Выделить всё

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


OPTION





[/list]





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

А вот 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%;
}

Я понял, что это доктайп. Удаление этого заставляет его работать. Если добавить его обратно, он не будет работать должным образом.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -expansion