title: Bootstrap dropdown not working in mobile
body: <p>I'm having an issue with bootstrap dropdown, it works fine in big screen sizes, but when testing in mobile devices it appears already expanded, overlapping the following menu links. Here's my html for nav:</p>
  
  <pre><code>&lt;!-- NAVBAR --&gt;
  
  &lt;nav class="navbar-interna"&gt;
      &lt;div class="container"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div class="navbar-header" style="width: 100%;"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" 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;div class="row"&gt;
                  &lt;div class="col-sm" style="float:left;"&gt;
                      &lt;a class="navbar-brand" href="index.html"&gt;&lt;img src="img/logo.png" data-active-url="img/logo.png" alt="Colegio North Hills" class="img-responsive" &gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm" style="float:right;"&gt;
                          &lt;ul class="navbar-sec"&gt;
                                  &lt;li&gt;&lt;a href="https://schoolnet.colegium.com/webapp/"&gt;Schoolnet&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="http://200.85.120.107:8083/stwa/login.shtml"&gt;Schooltrack&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;   
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav navbar-right main-nav"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
                    &lt;a href="#intro" class="dropdown-toggle" data-toggle="dropdown"&gt;El Colegio&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                    &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="kinder.html"&gt;Kinder&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="primaria.html"&gt;Primaria&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="secundaria.html"&gt;Secundaria&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="institucional.html"&gt;Institucional&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="25-aniversario.html"&gt;25 Años&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="valores.html"&gt;Valores&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="sustentabilidad.html"&gt;Depto. de Sustentabilidad&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#proyectos"&gt;Proyectos&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#sports"&gt;Houses &amp; Sports&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#arts"&gt;Arts&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#noticias"&gt;Noticias&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="descargas.html"&gt;Descargas&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" data-toggle="modal" data-target="#modal1" class="btn btn-blue"&gt;Admisión&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt;
      &lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And here the scripts:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;$('ul.nav li.dropdown').hover(function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
          }, function() {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
          });
  &lt;/script&gt;
  
  &lt;script&gt;
       $(document).ready(function(){
          $('.dropdown-toggle').dropdown()
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>You can check the live site (testing server) here:</p>
  
  <p><a href="http://nhtest.esy.es/index.html" rel="nofollow noreferrer">http://nhtest.esy.es/index.html</a></p>
  
  <p>What is wrong? Been cracking my head for too long, will appreciate your help!</p>