Multi Level Dropdown W3.CSS

Question

I wonder if the w3.css does Support a 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>

Result:

This is what I currently have. If I try to copy and paste the dropdown block into the Third Link which should open another Dropdown it is just always displayed and not only when I start hovering the Link. I would also like if the new dropdown could open to the right then.

This is what I tried:

<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>

Result:

I'm using the w3.css right now. It worked out for everything I needed until now. Any ideas what I could add to the css that the second drop down will work and not already show up when hovering the first drop down?

Answer 1

This isn't a multilevel solution (just for two nested dropdowns):

.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%}

The first line hide the inner dropdown, the second show it on hover.

If you want the content of the second go to left, take off "rigth:100%".

Saludos!