Always be aware when using JavaScript for displaying/hiding stuff on mouseover and mouseout. Often this can be done using CSS and the :hover pseudo-class.
nav li>ul {
display: none;
}
nav li:hover>ul {
display: block;
}<nav>
<ul>
<li>
<a href="/how-we-support/">How we support</a>
<ul>
<li><a href="#">Cross-functional training & tools</a></li>
<li><a href="#">ESG Programme management support</a></li>
<li><a href="#">Industry collaboration & pre-competitive initiatives</a></li>
<li><a href="#">Multi-stakeholder intiatives</a></li>
</ul>
</li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>If you would like to keep the sub menu open and have the main menu item being an anchor you can create a clickable icon with a hidden checkbox:
nav li>ul {
display: none;
}
nav li:has(input:checked)>ul {
display: block;
}
nav li>label {
cursor: pointer;
margin-left: 1em;
}
nav li>label:after {
content: '⏵';
}
nav li>label:has(input:checked):after {
content: '⏷';
}
nav li>label>input {
display: none;
}<nav>
<ul>
<li>
<a href="/how-we-support/">How we support</a>
<label><input type="checkbox" /></label>
<ul>
<li><a href="#">Cross-functional training & tools</a></li>
<li><a href="#">ESG Programme management support</a></li>
<li><a href="#">Industry collaboration & pre-competitive initiatives</a></li>
<li><a href="#">Multi-stakeholder intiatives</a></li>
</ul>
</li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>