Сделай:
.submenu {
max-height: 0;
overflow: hidden;
transition: 0.2s (вот это и отвечает за анимацию)
}
.active {
max-height: 30px;
transition: 0.2s
}
Проблема этого метода, что надо заранее знать высоту контента внутри.
Иначе если поставить max-height больший чем свой контент, то можно заметить задержки в анимации.
Никаких jq в анимациях не надо использовать.
