“服务器上的子类别响应问题”

Question

我刚刚将我的网站上传到托管服务器上。当我将鼠标光标放在子类别上并单击时-它会打开....但是在智能手机上，我尝试触摸子类别时，它会关闭整个导航栏。

我试图增加字体大小，但是没有用。这是我的网站booksjerry.com，您可以自行检查

<div id="navigation">
        <!-- container -->
        <div class="container">
            <div id="responsive-nav">
                <!-- category nav -->
                <div class="category-nav">
                    <span class="category-header">Fire Discount Categories <i class="fa fa-list"></i></span>
                    <ul class="category-list">
                        <li class="dropdown side-dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="productscat.php?cat=COLLECTION OF BOOKS SETS">Collection of Books Sets<i class="fa fa-angle-right"></i></a>
                            <div class="custom-menu">
                                <div class="row">
                                    <div class="col-md-4">
                                        <ul class="list-links">
                                            <li>
                                                <h3 class="list-links-title"> Sub-Categories</h3></li>
                                            <li><a href="productssub.php?sub=SETS OF NOVELS">SETS OF NOVELS</a></li>

                                        </ul>
                                        <hr class="hidden-md hidden-lg">
                                    </div>
                                    <div class="col-md-4">
                                        <ul class="list-links">
                                            <li>

                                            <li style="padding-top:26px;"><a href="productssub.php?sub=SETS OF CHILDREN NOVELS">Sets of Childern Novels</a></li>

                                        </ul>
                                        <hr class="hidden-md hidden-lg">
                                    </div>

                                </div>


                            </div>
                        </li>
                        <ul class="category-list">
                        <li class="dropdown side-dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="productscat.php?cat=URDU BOOKS">Urdu Books<i class="fa fa-angle-right"></i></a>
                            <div class="custom-menu">
                                <div class="row">
                                    <div class="col-md-4">
                                        <ul class="list-links">
                                            <li>
                                                <h3 class="list-links-title"> Sub-Categories</h3></li>
                                            <li><a href="productssub.php?sub=FICTION">Fiction</a></li>
                                            <li><a href="productssub.php?sub=NON-FICTION">Non-Fiction</a></li>

                                        </ul>
                                        <hr class="hidden-md hidden-lg">
                                    </div>
                                    <div class="col-md-4">
                                        <ul class="list-links">
                                            <li>

                                            <li style="padding-top:26px;"><a href="productscat.php?cat=SETS OF CHILDREN NOVELS">Sets of Childern Novels</a></li>
                                                <li ><a href="productssub.php?sub=SELP-HELP">Self-help</a></li>
                                                    <li><a href="productssub.php?sub=POETRY/PHILOSPHY">Poetry/Philosphy</a></li>

                                        </ul>
                                        <hr class="hidden-md hidden-lg">
                                    </div>

                                </div>

                            </div>
                        </li>



                    </ul>
                </div>
---CSS--
.category-nav {
  float: left;
  width: 270px;
}

.category-nav .category-header {
  padding: 15px;
  display: block;
  text-transform: uppercase;
  background: #F8694A;
  color: #FFF;
  font-weight: 700;
}

.category-nav .category-header>i {
  float: right;
  line-height: 20px;
}

.category-nav .category-list {
  position: absolute;
  width: 270px;
  background-color: #FFF;
  border-left: 1px solid #DADADA;
  border-right: 1px solid #DADADA;
  border-bottom: 1px solid #DADADA;
  z-index: 50;
  -webkit-transition: 0.3s all;
  transition: 0.3s all;
}

.category-nav.show-on-click .category-list {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate(0px, 15px);
  -ms-transform: translate(0px, 15px);
  transform: translate(0px, 15px);
}

.category-nav.show-on-click .category-list.open {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.category-nav .category-list>li+li {
  border-top: 1px solid #DADADA;
}

.category-nav .category-list>li.dropdown>.dropdown-toggle>i {
  float: right;
  line-height: 20px;
}

.category-nav .category-list>li>a {
  display: block;
  padding: 15px;
  text-transform: uppercase;
}

.category-nav .category-list>li>a:hover, .category-nav .category-list>li>a:focus, .category-nav .category-list>li.dropdown.open>a {
  color: #F8694A;
}

我想要的是，每当我触摸智能手机上的子类别列表时，它就会打开一个新页面，因为它出现在所有针对智能手机进行了优化的网站中。