显示变化破坏不透明度过渡

Question

我想要一个不可见的子菜单，当父菜单出现时变成可见的。请注意，我不希望当鼠标经过子菜单应该出现的位置时子菜单变得可见。在这种情况下，我希望子菜单 aaaa、bbbb、cccc 和 dddd 在鼠标经过菜单 "menu" 时变得可见。但我无法实现它，因为显示的变化破坏了过渡。这是我的 html:

<body>
    <nav class="gnb" dir="rtl">
        <ul class="gnb">
            <li class="gnb"> <a class="gnb" href="../products/products.html">menu</a>

                <ul class="sub-constructibles">
                    <li class="gnb"><a class="gnb" href="#">aaaa</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">bbbb</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">cccc</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">dddd</a>

                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

这是我的 css:

* {
    transition: all .4s;
}
nav.gnb {
    background-color: #0f7f07;
}
li.gnb {
    display:inline-block;
}
li.gnb:hover {
    background-color: #20ca05;
}
ul.sub-constructibles {
    opacity:0;
    visibility:hidden;
    position: absolute;
    background-color: #20ca05;
}
li.gnb:hover ul.sub-constructibles {
    opacity:.9;
    visibility:visible;
}
a.gnb {
    display:inline-block;
}

这是我的 fiddle： https://jsfiddle.net/e4h0bccy/

我也尝试过更改可见性而不是显示，但它不起作用，因为当鼠标移到它们之前的位置时，子菜单也会变得可见。

Answer 1

您的解决方案是将 display: block 和 visibility: hidden 设置为子菜单。看一看：

https://jsfiddle.net/e4h0bccy/2/

ul.sub-constructibles {
    opacity:0;
    display:block;
    position: absolute;
    background-color: #20ca05;
    visibility: hidden;
}

将不透明度设置为零，您就没有问题，因为菜单在您悬停之前是不可见的。

片段：

* {
    transition: all .4s;
}
nav.gnb {
    background-color: #0f7f07;
}
li.gnb {
    display:inline-block;
}
li.gnb:hover {
    background-color: #20ca05;
}
ul.sub-constructibles {
    opacity:0;
    display:block;
    position: absolute;
    background-color: #20ca05;
    visibility: hidden;
}
li.gnb:hover ul.sub-constructibles {
    display:block;
    opacity:.9;
    visibility: visible;
}
a.gnb {
    display:inline-block;
}

<body>
    <nav class="gnb" dir="rtl">
        <ul class="gnb">
            <li class="gnb" id="constructibles"> <a class="gnb" id="constructibles" href="../products/products.html">menu</a>

                <ul class="sub-constructibles">
                    <li class="gnb"><a class="gnb" href="#">aaaa</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">bbbb</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">cccc</a>

                    </li>
                    <li class="gnb"><a class="gnb" href="#">dddd</a>

                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

显示变化破坏不透明度过渡

display change ruins opacity transition

html

css

transition

display