Некоректно работает выпадающее меню на смартфоне

Question

На десктопном варианте сайта всё работает, как часы, а на мобильной версии ссылки срабатывают только первый раз, а потом не работают. Использую Bootstrap 3.

body {
  background-color: #f0fa61;
  background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
  background-image: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
  background-image: -moz-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .07) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, .13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, .17) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, .19) 50%);
}

.header a,
a:hover {
  color: #f0ad4e;
  text-decoration: none;
}

.header h1 {
  letter-spacing: 15px;
  font-size: 300%;
}

.header p {
  color: white !important;
  font-size: 90%;
  letter-spacing: 3px;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
  color: #fff;
  background-color: #346270;
}

.nav-pills>li>a {
  color: #fff;
}

.nav-pills>li>a:hover {
  background-color: #346270;
}

.navbar-inverse {
  padding: 1%;
  border-radius: 5px;
}

.navbar-toggle {
  border-color: #0000001f!important;
}

.clear {
  clear: both;
  height: 63px;
}

.wrapper {
  min-height: 100%;
}

html,
body {
  height: 100%;
}

.margin-8 {
  margin-top: 8%;
}

.panel {
  border: none;
}

.panel-body {
  background-color: #f9f9f9;
}

.panel-info>.panel-heading {
  background-color: #f0ad4e;
  color: white;
  border-color: transparent;
}

.sidebar-header {
  font-size: 120%;
  letter-spacing: 2px;
}

.input-lg {
  font-size: 14px;
}

.form-control {
  border-radius: 0px;
}

.list-group-item-warning {
  color: #8a6d3b;
  background-color: #f9f9f9;
}

.badge {
  background-color: black;
}

.info-block {
  font-size: 120%;
}

.info-block .badge {
  font-size: 80%;
}

.info-block span {
  margin-right: 3%;
}

textarea.form-control {
  height: 200px;
}

form.privetctvie {
  background-color: #fff49e;
  letter-spacing: 2px;
  font-size: 180%;
  border: solid #ffed5e;
  border-radius: 5px;
  padding: 1%;
}

button.header {
  width: 100%;
  letter-spacing: 5px;
}

form.poisk a {
  width: 100%;
  color: white;
  height: 10%;
  background-color: #f0ad4e;
  padding: 3% 35% 4% 35%;
  font-size: 150%;
  border-radius: 6px;
  letter-spacing: 5px;
}

.ras-poisk {
  width: 100%;
}

.ras-poisk a {
  color: white;
}

.margin-5 {
  margin-bottom: 3%;
}

.avtor img {
  float: left;
  border-radius: 5px;
  border: solid 5px #dad7d5;
  width: 25%;
}

.biografiya {
  margin-top: -35%;
  padding-left: 35%;
  font-size: 150%;
  font: italic small-caps solid 16px/2 cursive;
}

hr.proisvedeniya {
  margin-top: -5%;
}

.proisvedeniya ul li a {
  text-decoration: none;
  font-size: 150%;
  color: black;
}

.proisvedeniya ul li a:hover {
  color: #f0ad4e;
}

.text {
  background-color: #fff8d1;
  background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
  background-image: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
  background-image: -moz-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .07) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, .13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, .17) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, .19) 50%);
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 1%;
  padding-top: 1%;
  border-radius: 8px;
  font-size: 17px;
}

.text ul li {
  text-decoration: none;
}

.imya a {
  color: black;
}

.glavi {
  margin-top: 5%;
}

form.glavi a.button {
  background-color: #7cfcc7;
  padding: 2%;
  margin-right: 0.5%;
  border-radius: 7%;
  color: #f0ad4e;
}

form.glavi a.active {
  background-color: #e0385a;
  color: #f0ad4e;
}

form.glavi a.button:hover {
  background-color: #346270;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
  color: #fff;
  background-color: #346270;
}

.nav-pills>li>a {
  color: #fff;
}

.nav-pills>li>a:hover {
  background-color: #346270;
}

.navbar-inverse {
  padding: 1%;
  border-radius: 0px;
  float: none !important;
}

.stranitsi a {
  padding: 1%;
  background-color: #ffb224;
  color: #f5f5f5;
  border-radius: 4px;
  font-size: 125%;
}

.glavs {
  border-radius: 4px;
  background-color: #f0ad4e;
  border-color: #fff6ca;
}

.dropdown {
  padding: 1%;
  background-color: #f0ad4e;
  color: white;
  border-radius: 5px;
  text-align: center;
  height: 5%;
}

footer {
  color: #666;
  background: #222;
  padding: 17px 0 18px 0;
  border-top: 1px solid #000;
  height: 10%;
}

footer a {
  color: #999;
}

footer a:hover {
  color: #efefef;
}

@media (max-width: 767px) {
  .nav-pills>li {
    float: none;
  }
  .nav-pills {
    text-align: center;
  }
  .header h1 {
    letter-spacing: 5px;
    font-size: 280%;
  }
  .header {
    text-align: center;
  }
  form.privetctvie {
    font-size: 120%;
  }
  hr.text {
    padding-right: 5%;
  }
  .avtor img {
    border-radius: 5px;
    border: solid 5px #dad7d5;
    width: 70%;
    margin: 3% 15% 3% 15%;
  }
  .biografiya {
    margin-top: -35%;
    padding-left: 7%;
    padding-top: 20%;
    font-size: 120%;
  }
  .stranitsi a {
    font-size: 115%;
  }
  .text h2,
  .text h3 {
    text-align: center;
  }
  .dropdown {
    padding: 2%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel-body">
  <div class="dropdown">
    <a data-toggle="dropdown" href="#" style="padding: 1%; background-color: #f0ad4e; color: white; border-radius: 5px">Показать всё</a>

    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li><a href="pushkin9.html">А.С.Пушкин</a></li>
      <li><a href="Lermontov9.html">М.Ю. Лермонтов</a></li>
      <li><a href="Gogol9.html">Н.В. Гоголь</a></li>
      <li><a href="Griboedov9.html">А.С. Грибоедов</a></li>
      <li><a href="Lomonosov9.html">М.В. Ломоносов</a></li>
      <li><a href="Derjavin9.html">Г.Р. Державин</a></li>
      <li><a href="Batyushkov9.html">К.Н. Батюшков</a></li>
      <li><a href="Gukovski9.html">В.А. Жуковский</a></li>
      <li><a href="Vyazemskiy9.html">П.А. Вяземский</a></li>
      <li><a href="Yazikov9.html">Н.М. Языков</a></li>
      <li><a href="Delvig9.html">А.А. Дельвиг</a></li>
      <li><a href="Baratinskiy9.html">Е.А. Баратынский</a></li>
      <li><a href="Rileev9.html">К.Ф. Рылеев</a></li>
    </ul>

  </div>
</div>

БЛОГ НА HUSL

Некоректно работает выпадающее меню на смартфоне

Ответы (0 шт):