I'm experiencing an issue with my menu that was previously working perfectly, but suddenly stopped functioning on Chrome and mobile devices. Strangely, I haven't made any changes to the code.
The problem arises when I click 'init', causing the menu to close unexpectedly.
Here is a snippet of my code:
<header id="top">
<div class="header-top">
<div class="headerBG"></div>
<div class="container bposi">
<h1 id="logo"> <a title="MIR" href="#"> <img title="" alt="" src="images/kkkk.png"> </a> </h1>
<div class="navbar-header navBox">
<div>
<button data-target=".navbar-main-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> </button>
<a title="Login" id="btnLoginRes" href="#" class="btn btn-login btn-loginMobile "><span>Login</span></a>
<div class="navbar-collapse navbar-main-collapse collapse " aria-expanded="true" style="">
<ul class="navigation" id="mainNav">
<li class="hasSubMenu" ><a title="Products" data-toggle="dropdown" aria-expanded="true" href="#"><span>Products</span></a>
<ul class="dropdown-menu">
<li><a href="http://www.google.com" title=""><img alt="" src="images/img" /><strong>1</strong></a></li>
<li><a href="#" title=""><img alt="" src="images/img1.png" /><strong>2</strong></a></li>
<li><a href="#" title=""><img alt="" src="images/img2.png" /><strong>3</strong></a></li>
<li><a href="#" title=""><img alt="" src="images/img3.png" /><strong>4</strong></a></li>
</ul>
</li>
// The rest of the code has been omitted for brevity