Css переход от отображения нет к отображению блока, навигация с subnav

Ответ 1

Как вы знаете, свойство display не может быть анимировано, но просто имея его в своем CSS, оно переопределяет переходы visibility и opacity.

Решение... просто удалили свойства display.

nav.main ul ul {
  position: absolute;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  background-color: rgba(92, 91, 87, 0.9);
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
  visibility: visible;
  opacity: 1;
}

<nav class="main">
  <ul>
    <li>
      <a href="">Lorem</a>
      <ul>
        <li><a href="">Ipsum</a>
        </li>
        <li><a href="">Dolor</a>
        </li>
        <li><a href="">Sit</a>
        </li>
        <li><a href="">Amet</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Ответ 2

Обычно, когда люди пытаются оживить display: none, они действительно хотят:

• Уменьшить содержание и
• Если элемент не занял место в документе, когда он скрыт

В наиболее популярных ответах используется visibility, который может достичь только первой цели, но, к счастью, так же легко достичь как с помощью position.

Так как position: absolute удаляет элемент из ввода интервала между потоками документа, вы можете переключаться между position: absolute и position: static (глобальное значение по умолчанию) в сочетании с opacity. См. Приведенный ниже пример.

.content-page {
  position:absolute;
  opacity: 0;
}

.content-page.active {
  position: static;
  opacity: 1;
  transition: opacity 1s linear;
}

Ответ 3

Вы можете сделать это с помощью анимационного ключевого кадра, а не перехода. Измените объявление hover и добавьте ключевой кадр анимации, вам также может потребоваться добавить префиксы браузера для -moz- и -webkit-. Подробнее см. https://developer.mozilla.org/en/docs/Web/CSS/@keyframes.

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

Вот обновление на вашей скрипке. https://jsfiddle.net/orax9d9u/1/