«Ответ подкатегории на сервере»

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;
}

. Когда я касаюсь списка подкатегорий на смартфоне, мне нужно открывать новую страницу, как это происходит на всех сайтах, оптимизированных для смартфонов.