1

我想要一个不可见的子菜单，当父菜单在hower中时变为可见。请注意，当鼠标移过子菜单应位于的位置时，我不希望子菜单变得可见。在这种情况下，我希望当鼠标移过菜单“菜单”时，子菜单 aaaa、bbbb、cccc 和 dddd 变得可见。但我无法实现它，因为显示的变化破坏了过渡。这是我的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;
}

这是我的小提琴： https ://jsfiddle.net/e4h0bccy/

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

4

1 回答 1

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>

于 2015-11-28T16:29:16.940 回答