这就是我的jsFiddle链接

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>

为什么没有过渡？如果我设置

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

然后，“ subnav”将永远不会出现（当然），但是为什么不触发不透明度转换呢？如何使过渡正常工作？