Css transition from display none to display block, navigation with subnav

This is what I have jsFiddle link

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: 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 {
    display: block;
    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>

Why is there no transition? If I set

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 0; /* changed this line */
}

Then the "subnav" will never appear (of course ) but why does the transition on the opacity not trigger? How to get the transition working?

As you know the display property cannot be animated BUT just by having it in your CSS it overrides the visibility and opacity transitions.

The solution...just removed the display properties.

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>

Generally when people are trying to animate display: none what they really want is:

1. Fade content in, and
2. Have the item not take up space in the document when hidden

Most popular answers use visibility, which can only achieve the first goal, but luckily it's just as easy to achieve both by using position.

Since position: absolute removes the element from typing document flow spacing, you can toggle between position: absolute and position: static (global default), combined with opacity. See the below example.

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

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

You can do this with animation-keyframe rather than transition. Change your hover declaration and add the animation keyframe, you might also need to add browser prefixes for -moz- and -webkit-. See https://developer.mozilla.org/en/docs/Web/CSS/@keyframes for more detailed info.

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: 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 {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
}

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

    100% {
        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>

Here is an update on your fiddle. https://jsfiddle.net/orax9d9u/1/