I am trying to whilst only using w3.css and font-awesome.css create a simple drop-down multi menu.
<html>
<title>{{.Title}} - {{.System}} - {{.Time}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<div class="w3-top">
<header class="w3-container w3-dark-blue">
<div class="w3-bar w3-dark-blue w3-border">
<a href="/index" class="w3-bar-item w3-button w3-dark-blue"><i class="fa fa-home"></i></a>
<div class="w3-dropdown-hover w3-mobile">
<button class="w3-button">maindropdown<i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<button class="w3-button">subdropdown<i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="/item1" class="w3-bar-item w3-button w3-mobile">submenu1</a>
<a href="/questionhebergement" class="w3-bar-item w3-button w3-mobile">submenu2</a>
<a href="/questionarchitecture" class="w3-bar-item w3-button w3-mobile">submenu3</a>
<a href="/questionmetier" class="w3-bar-item w3-button w3-mobile">submenu4</a>
</div>
<button class="w3-button">subdropdown2<i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="/item1" class="w3-bar-item w3-button w3-mobile">submenu1</a>
<a href="/questionhebergement" class="w3-bar-item w3-button w3-mobile">submenu2</a>
<a href="/questionarchitecture" class="w3-bar-item w3-button w3-mobile">submenu3</a>
<a href="/questionmetier" class="w3-bar-item w3-button w3-mobile">submenu4</a>
</div>
<button class="w3-button">subdropdown3<i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="/item1" class="w3-bar-item w3-button w3-mobile">submenu1</a>
<a href="/questionhebergement" class="w3-bar-item w3-button w3-mobile">submenu2</a>
<a href="/questionarchitecture" class="w3-bar-item w3-button w3-mobile">submenu3</a>
<a href="/questionmetier" class="w3-bar-item w3-button w3-mobile">submenu4</a>
</div>
<button class="w3-button">subdropdown4<i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="/item1" class="w3-bar-item w3-button w3-mobile">submenu1</a>
<a href="/questionhebergement" class="w3-bar-item w3-button w3-mobile">submenu2</a>
<a href="/questionarchitecture" class="w3-bar-item w3-button w3-mobile">submenu3</a>
<a href="/questionmetier" class="w3-bar-item w3-button w3-mobile">submenu4</a>
</div>
</div>
</div>
<a href="/log{{.LoginAction}}" class="w3-bar-item w3-button w3-right"> <i class="fa fa-sign-{{.LoginAction}}"></i></a>
</div>
</div>
</header>
<div class="w3-bottom">
<div class="w3-bar w3-teal">
<footer class="w3-container w3-dark-blue w3-margin-bottom">
<table class="w3-table" width="100%">
<tr style="font-size:10px;">
</tr>
</table>
</footer>
</div>
</div>
</html>Basically, when selecting the main drop-down [menu view][1] it should show under it the sub dropdown, sub dropdown 2 , 3 , 4 as it already does in line, which is fine, however, the submenu options from the first sub dropdown should not show, then only when hovering over sub dropdown should it show the submenus.
I have looked at other posts from 2012-2022 which all offered some sorts of solutions but not quite what I am using here, as they required using additional internal styles which are not within the w3.css. The goal is to use w3.css already existing, if it's indispensable then ill just add another .css stylesheet with the few needed.
Could not find the solution... anyone knows where I went wrong?