bootstrap dropdown menu issue on mobile and chrome

Question

I have this menu and it was working fine but since yesterday it doesn't work on chrome and mobile platforms . I did not change anything in the code at all.

The problem is when i am clicking init, the menu closes.

This is 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> <li><a title="Softwares" href="#"><span>Softwares</span></a></li> <li><a title="Info" href="#"><span>Info</span></a></li> <li><a title="Contact" href="#"><span>Contact</span></a></li> <li class="hasSubMenu subMenudownload"><a title="Downloads" data-toggle="dropdown" aria-expanded="true" href="#"><span>Downloads</span></a> <ul class="dropdown-menu"> <li><a href="#" title=""><img alt="" src="images/img-1.png" /><strong>1</strong></a></li> <li><a href="#" title=""><img alt="" src="images/img-2.png" /><strong>2</strong></a></li> <li><a href="#" title=""><img alt="" src="images/img-3.png" /><strong>3</strong></a></li> </ul> </li> <li class="hasSubMenu"><a title="English" href="#" data-toggle="dropdown" aria-expanded="true"><span>English</span></a> <ul class="dropdown-menu noImg"> <li><a href="#" title=""><strong>English</strong></a></li> <li><a href="#" title=""><strong>Arabic</strong></a></li> </ul> </li> <li><a title="Search" href="#" class="icon-search" id="btnSearch"><span>Search</span></a></li> </ul> </div> <input id="fieldSearch" type="text" class="input-text" placeholder="Search " /> <a title="Search" href="#" class="icon-close" id="btnClose"><span>&nbsp;</span></a> </div> </div> </div> </div> </header> <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/bootstrap.js"></script> 

Answer 1

Fixed

added this to my css and it is working fine now

.dropdown-backdrop {
  display: none;
}