移动下拉子菜单打开链接点击

Question

美好的一天。我为我的网站创建了一个下拉菜单，其中包含多个下拉列表。在浏览器屏幕上，一切都运行良好，但在移动设备上问题开始。我的问题是，在我的手机上，我可以点击住宿链接，下拉菜单会打开，但是当我点击其中一个Beauty下拉菜单时，它会选择指甲链接并带我到那个页面而不是打开美容下拉列表。

如果我单击菜单侧面的美容，它将正确打开，但如果我单击菜单中间则不会。

以下是我的代码。

CSS for mobile：

@media (min-width: 1200px) {}
@media (min-width: 1024px) and (max-width: 1100px) {
.navbar-search .search-query:click{
width: 70px;
}
}
/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) {
.PL0 {
padding-left: 20px;
}
.PT20 { padding-top:20px;}
.navbar .brand {
padding-bottom: 18px;
}
/* link background */
.nav-collapse .nav>li>a:focus, .nav-collapse .dropdown-menu a:focus {
}
/* active link */
.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.nav.social-icons{
text-align: center;
}

.nav.social-icons li{
float: none;
display: inline-block;
border: 1px solid #000;
}

.nav-collapse .navbar-form, .nav-collapse .navbar-search {
border: 0;
}

/* search form */
.navbar-search {
text-align: center;
  }

  .navbar-search .search-query{
width: 100px;
border: 1px solid #000;
  }

.nav-collapse, .nav-collapse.collapse {
height: auto;
overflow: hidden;
  }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

.navbar .brand {
padding-bottom: 18px;
}

.PL0 {
padding-left: 20px;
}
.PT20 { padding-top:20px;}

/* link background */
.nav-collapse .nav>li>a:focus, .nav-collapse .dropdown-menu a:focus {
background: rgba(0, 0, 0, 0.55);
}

  /* active link */
.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
  }

  .nav.social-icons{
text-align: center;
  }

  .nav.social-icons li{
float: none;
display: inline-block;
border: 1px solid #000;
  }

  .nav-collapse .navbar-form, .nav-collapse .navbar-search {
border: 0;
  }

  /* search form */
  .navbar-search {
    text-align: center;
  }

  .navbar-search .search-query{
    width: 100px;
    border: 1px solid #000;
  }

  .nav-collapse, .nav-collapse.collapse {
    height: auto;
    overflow: hidden;
  }

}

/* Landscape phones and down */
@media (max-width: 480px) { 

.nav-collapse:click, .nav-collapse.collapse:click {
height: auto;
overflow: hidden;
}

}

这是菜单代码：

<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle"
data-toggle="dropdown">Business<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="javascript:void(0)" class="dropdown-toggle" >Accommodation
&nbsp;&raquo;</a>
<ul class="dropdown-menu">
<li><a href="bead-and-breakfast.php">Bead And Breakfast</a></li>
<li><a href="guest-house.php">Guest House</a></li>
<li><a href="lodges.php">Lodges</a></li> 
<li><a href="tours.php">Tours</a></li>
</ul>
</li><hr>
<li class="dropdown-submenu">
<a href="javascript:void(0)" class="dropdown-toggle">Beauty
&nbsp;&raquo;    </a>
<ul class="dropdown-menu">
<li><a href="beauty-clinic.php">Beauty Clinic</a></li>
<li><a href="beauty-products.php">Beauty Products</a></li>
<li><a href="hair-salon.php">Hair Salon</a></li>
<li><a href="nails.php">Nails</a></li>
<li><a href="javascript:void(0)">Beauty</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="javascript:void(0)" class="dropdown-toggle">Beauty &nbsp;&raquo;
</a>
<ul class="dropdown-menu">
<li><a href="beauty-clinic.php">Beauty Clinic</a></li>
<li><a href="beauty-products.php">Beauty Products</a></li>
<li><a href="hair-salon.php">Hair Salon</a></li>
<li ><a href="nails.php">Nails</a></li>
</ul>
</li><hr>
<li class="dropdown-submenu">
<a href="javascript:void(0)" class="dropdown-toggle">Beauty &nbsp;&raquo;
</a>
<ul class="dropdown-menu">
<li><a href="beauty-clinic.php">Beauty Clinic</a></li>
<li><a href="beauty-products.php">Beauty Products</a></li>
<li><a href="hair-salon.php">Hair Salon</a></li>
<li ><a href="nails.php">Nails</a></li>
</ul>
</li><hr>
<li class="dropdown-submenu">
<a href="javascript:void(0)" class="dropdown-toggle">Beauty &nbsp;&raquo;
</a>
<ul class="dropdown-menu">
<li><a href="beauty-clinic.php">Beauty Clinic</a></li>
<li><a href="beauty-products.php">Beauty Products</a></li>
<li><a href="hair-salon.php">Hair Salon</a></li>
<li ><a href="nails.php">Nails</a></li>
</ul>
</li><hr>
</ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>

</div>

希望有人可以帮助我。