Why transition didn't work???

Question

I would like to see a menu with a nice effect when you click the button. Anyone know why it does not work? Code:
HTML:
<nav class="nav">
<ul class="main-menu">
<li>Aktualności</li>
<li>Oferta</li>
<div id="nav-icon2">
<span></span>
<span></span>
<span></span>
</div>
<ul class="sub-menu">
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
</ul>
<li>Realizacje</li>
<li>Kontankt</li>
</ul>
</nav>
CSS:
.nav {
background-color: #666666;
width: 25%;
padding-left: 10px;
font-size: 28px;
position: relative;
}
.main-menu {
display: none;
list-style-type: none;
}
.main-menu li {
transition: all 0.3s ease-in-out;
}
.main-menu.active{
display: inline;
}
JS:
btn1.addEventListener("click", function() {
mainMenu.classList.toggle('active');
btn1.classList.toggle('open');
}, false);

btn2.addEventListener('click', function() {
subMenu.classList.toggle('active');
btn2.classList.toggle('open');
}, false)

Answer 1

No transition for "display" property
And the question is.....
What is the change of <li> list?!

Answer 2

OK, I fixed it...