title: Close bootstrap dropdown menu aftering clicking on ipad
body: <p>I have tried several ways to close the dropdown but I cannot figure it out. </p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="navbar-collapse"&gt;
      &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="dropdown"&gt;&lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;Dropdown&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="dropdown-menu" role='menu'&gt;
                  &lt;li&gt;&lt;a href="#section1"&gt;section1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#section2"&gt;section2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#section3"&gt;section3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>.dropdown:hover .dropdown-menu {
  display: block;
  }
  </code></pre>