title: Bootstrap v3.3.6 Dropdown not working with mobile menu
body: <p>I'm trying to solve this issue since few days. I have found so many solution but nothing works for me.
  I'm using bootstrap 3.3.6 and I would like to use a drop down menu.
  The code works fine on a desktop screen, but not in a mobile screen.</p>
  
  <p>Here is a capture:</p>
  
  <p><a href="https://i.stack.imgur.com/A3M0k.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A3M0k.jpg" alt="enter image description here"></a></p>
  
  <p>When I click on "Product", the global menu disapear, and I can't find the sub-menu.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!-- Navigation  --&gt;
  &lt;nav class="navbar navbar-default navbar-fixed-top shadoww"&gt;
     &lt;div class="container"&gt;
            &lt;div class="navbar-header page-scroll"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand page-scroll" href="#page-top" style="width:250px;"&gt;&lt;img src="img/logo.png" width="60%" style="margin-top: -4%;"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;nav class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                     &lt;li class="hidden"&gt;
                        &lt;a href="#page-top"&gt;&lt;/a&gt;
                     &lt;/li&gt;
                     &lt;li&gt;
                        &lt;a id="translate0" class="page-scroll move" href="#home"&gt;Home&lt;/a&gt;
                     &lt;/li&gt;
                     &lt;li class="dropdown"&gt;
                          &lt;a id="translate01" href="#" class="dropdown-toggle move multiselect" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Product&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                             &lt;li&gt;&lt;a class="page-scroll move" href="#product"&gt;Description&lt;/a&gt;&lt;/li&gt;
                             &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a id="translate39" class="page-scroll move" href="#compat"&gt;Compatibility&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;    
                     &lt;/li&gt;
                     &lt;li&gt;&lt;a id="translate02" class="page-scroll move" href="#diapo"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a id="translate03" class="page-scroll move" href="#team"&gt;Founder&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a class="page-scroll move" href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a id="popup" class="move" href="javascript://"&gt;Shop&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a class="forum move" href="/forum/index.php" target="_blank"&gt;Forum&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                     &lt;li&gt;
                     &lt;a id="flagA" class="navbar-brand" href="javascript:doTranslate('fr')" style="width:80px;"&gt;&lt;img id="flag0" onclick="javascript:changeImage('fra')" src="img/France-Flag-50.png" class='changer' width="55%" style="margin-top: -4%;"&gt;&lt;/a&gt;
                     &lt;/li&gt;
                     &lt;li&gt;
                     &lt;a id="flagB" class="navbar-brand" style="width:80px;"&gt;&lt;img id="flag1" src="img/UK-Flag.png" class='changer' width="55%" style="margin-top: -4%;"&gt;&lt;/a&gt;
                     &lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/nav&gt;
  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;&lt;/div&gt;
          &lt;div id="successn"&gt;&lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I have tried the <code>stopPropagation</code> solution, but I think it's not a proper solution. I have also tried <a href="https://stackoverflow.com/questions/17178606/bootstrap-v2-dropdown-navigation-not-working-on-mobile-browsers?answertab=active#tab-top">this solution</a> but no way, still the same reaction.</p>
  
  <p>Does someone have another idea ? (I know, so many questions about this problem...) Thx</p>