something like this

#main-nav > ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#main-nav > ul.expanded {
  max-height: initial;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}