html - 多级下拉W3.CSS

我想知道w3.css是否支持Multi-Level-Dropdown吗？

<div class="w3-top">
            <div class="w3-bar w3-black w3-card">
                <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="toggleScreensizeNav()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
                <a href="#" class="w3-bar-item"><img class="w3-center" src="/img/logo.png" alt="LOGO" height="30"></a>
                <a href="#" class="w3-bar-item w3-button w3-padding-large w3-hover-cyan">HOME</a>
                <div class="w3-dropdown-hover w3-hide-small">
                    <button class="w3-padding-large w3-button w3-hover-cyan ">DROPDOWN<i class="fa fa-caret-down"></i></button>
                    <div class="w3-dropdown-content w3-bar-block w3-card-2 w3-animate-opacity">
                        <a href="#" class="w3-bar-item w3-button">First Dropdown Link</a>
                        <a href="#" class="w3-bar-item w3-button w3-hover-cyan">Second Dropdown Link</a>
                        <a href="#" class="w3-bar-item w3-button w3-hover-cyan">This should open another Dropdown</a>
                    </div>
                </div>
            </div>
        </div>

结果:



这就是我目前所拥有的。如果我尝试将下拉框复制并粘贴到第三个链接中，该链接应打开另一个下拉框，它只会一直显示，而不仅仅是在我开始悬停链接时。
我还想知道新下拉列表是否可以在右侧打开。

这是我尝试的:

<div class="w3-top">
            <div class="w3-bar w3-black w3-card">
                <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="toggleScreensizeNav()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
                <a href="#" class="w3-bar-item"><img class="w3-center" src="/img/logo.png" alt="LOGO" height="30"></a>
                <a href="#" class="w3-bar-item w3-button w3-padding-large w3-hover-cyan">HOME</a>
                <div class="w3-dropdown-hover w3-hide-small">
                    <button class="w3-padding-large w3-button w3-hover-cyan ">DROPDOWN<i class="fa fa-caret-down"></i></button>
                    <div class="w3-dropdown-content w3-bar-block w3-card-2 w3-animate-opacity">
                        <a href="#" class="w3-bar-item w3-button">First Dropdown Link</a>
                        <a href="#" class="w3-bar-item w3-button w3-hover-cyan">Second Dropdown Link</a>
                        <div class="w3-dropdown-hover w3-hide-small">
                            <button class="w3-padding-large w3-button w3-hover-cyan ">This should open another Dropdown<i class="fa fa-caret-right"></i></button>
                            <div class="w3-dropdown-content w3-bar-block w3-card-2 w3-animate-opacity">
                                <a href="#" class="w3-bar-item w3-button">1st Link</a>
                                <a href="#" class="w3-bar-item w3-button w3-hover-cyan">2nd Link</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

结果:



我现在正在使用w3.css。到现在为止，它都满足了我所需的一切。我有什么想法可以添加到CSS中，以至于第二个下拉列表将起作用并且将鼠标悬停在第一个下拉列表上时还没有显示出来吗？

最佳答案

这不是一个多级解决方案(仅适用于两个嵌套的下拉菜单):
.w3-dropdown-hover:hover .w3-dropdown-content .w3-dropdown-content {display:none}.w3-dropdown-hover:hover .w3-dropdown-hover:hover .w3-dropdown-content {display:inline;right:100%}
第一行隐藏内部下拉菜单，第二行在悬停时显示它。

如果要将第二个的内容移到左侧，请取消“rigth:100％”。

礼炮!

关于html - 多级下拉W3.CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51231395/