title: how to make bootstrap 3 dropdown on hover and click? (using in nav, not navbar)
body: <p>I'm using bootstrap 3 for desktop, and only using nav, rather than navbar.<br>
  How to make a dropdown on hover and click?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="nav" class="nav nav-pills clearfix right" role="tablist"&gt;
      &lt;li&gt;&lt;a href="#"&gt;menuA&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;menuB&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;menuC&lt;/a&gt;
          &lt;ul id="products-menu" class="dropdown-menu clearfix" role="menu"&gt;
              &lt;li&gt;&lt;a href=""&gt;A&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;B&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;C&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;D&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;menuD&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;menuE&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>