title: How to make bootstrap's dropdown menu not disappear when clicked?
body: <p>I'm using bootstrap for the first time. My question is about dropdown menu.<br>
  When the dropdown button is clicked, the dropdown menu is open. After clicking one dropdown item, the dropdown menu is closed.  Clicking anywhere in the window closes the dropdown menu too.  </p>
  
  <p>The question is:  </p>
  
  <p>I want to make the dropdown menu not to be closed when clicking the dropdown menu itself, because I want to nest another dropdown menu in it.</p>
  
  <p>demo:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags always come first --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="dropdown"&gt;
      &lt;button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
          Dropdown
      &lt;/button&gt;
      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenu1"&gt;
          &lt;div class="btn-group"&gt;
              &lt;button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  Action
              &lt;/button&gt;
              &lt;div class="dropdown-menu"&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;!-- jQuery first, then Bootstrap JS. --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>