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?
