Css transition from display none to display block, navigation with subnav : <p>This is what I have <a href="https://jsfiddle.net/vour8ad9/" rel="noreferrer">jsFiddle link</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="main"&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;a href=""&gt;Lorem&lt;/a&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=""&gt;Ipsum&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Dolor&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Sit&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Amet&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>

<p>Why is there no transition? If I set </p>

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

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