In this question there are 7 submenus in the navbar, I want when the website is loaded, make something like hover over all the menus one by one. Do not trigger mouse events, only manipulate DOM/style, I must write the code in JavaScript
Here is one of the Submenus :
<div class="submenu">
<ul class="linkmenu">
<li class="d-md-none">
<div class="nav-item standalone-nav"><span><a href="/wines/_/N-n" data-nav-label="Browse all Offers"><strong>Browse all Offers</strong></a></span></div>
</li>
<li>
<div class="nav-item"> <span>Type</span> <i class="arrow down"></i>
</div>
. . . . .
</a>
</li> -->
</ul>
</div>You can use
css: [querySelecter]:hover
example:
.nav-item:hover { /* css code here */ }
js: a mouseover and mouseleave
example:
document.querySelecter('.nav-item').addEventListener('mouseover',()=>{ /* js */ }
document.querySelecter('.nav-item').addEventListener('mouseleave',()=>{ /* js */ }