1

親メニューが表示されたときに非表示になり、表示されるサブメニューが必要です。サブメニューがあるべき場所にマウスが移動したときに、サブメニューが表示されないようにしたいことに注意してください。この場合、マウスがメニュー「メニュー」の上に移動したときに、サブメニュー 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