title: How to make a pure CSS bootstrap onclick and hover dropdown menu?
body: <p>There is a pure CSS (no JavaScript) dropdown menu activated on hover, and the menu stays open if you click it.</p>
  
  <p>It's here: <a href="https://stackoverflow.com/questions/28620390/making-animated-dropdown-menu-by-using-pure-css-like-bootstrap-does">Making Animated Dropdown Menu by Using Pure CSS Like Bootstrap does</a></p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      margin:0;
  }
  .acn-menu {
      text-align: center;
      background-color: rgba(0, 0, 0, 0.9);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      min-height: 74px;
      width: 100%;
  }
  .label_openclose {
      display: none;
  }
  .menu-tabs {
      height: 100%;
  }
  .menu-tabs .elem {
      box-sizing: border-box;
      padding: 0 20px;
      float: left;
      height: 100%;
      line-height: 70px;
      background-color: rgb(30, 30, 30);
      color: white;
  }
  @-webkit-keyframes spin {
      0% {
          transform: rotate(-180deg);
      }
      50% {
          transform: rotate(180deg);
      }
      100% {
          transform: rotate(-180deg);
      }
  }
  @keyframes spin {
      0% {
          transform: rotate(-180deg);
      }
      50% {
          transform: rotate(180deg);
      }
      100% {
          transform: rotate(-180deg);
      }
  }
  .menu-check:checked ~ .label_openclose {
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
  }
  .menu-check {
      display: none;
  }
  .menu-tabs .elem:hover {
      background-color: rgba(255, 255, 255, 0.2);
  }
  /*@media screen and (max-width:55%)*/
   @media screen and (max-width:768px) {
      .label_openclose {
          -webkit-animation: spin 2s;
          animation: spin 2s;
          display: inline-block;
          transform: rotate(-180deg);
          transition-duration: 1s;
          margin: 10px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border-top: 10px solid rgb(50, 50, 50);
          border-right: 10px solid rgb(100, 100, 100);
          border-bottom: 10px solid rgb(150, 150, 150);
          border-left: 10px solid rgb(200, 200, 200);
          background-color: transparent;
          cursor: pointer;
      }
      .label_openclose:hover {
          transform: rotate(180deg);
      }
      .menu-tabs .elem {
          transition: border 1s linear, height 1s;
          line-height: initial;
          float: initial;
          height: 0px;
          cursor: pointer;
          border-top: 0px solid #000;
          overflow: hidden;
      }
      .menu-tabs:hover .elem {
          height: 25px;
      }
      .menu-check:checked ~ .menu-tabs .elem {
          height: 25px;
          color: white;
          border-top: 2px solid rgba(255, 255, 255, 0.2);
      }
      .label_openclose:hover ~ .menu-tabs .elem {
          border-top: 2px solid rgba(255, 255, 255, 0.2);
          height: 25px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="acn-menu"&gt;
      &lt;input type="checkbox" id="openclose" class="menu-check" /&gt;
      &lt;label class="label_openclose" for="openclose"&gt;&lt;/label&gt;
      &lt;div class="menu-tabs"&gt;
          &lt;div class="elem"&gt;test&lt;/div&gt;
          &lt;div class="elem"&gt;nav&lt;/div&gt;
          &lt;div class="elem"&gt;bar&lt;/div&gt;
          &lt;div class="elem"&gt;with&lt;/div&gt;
          &lt;div class="elem"&gt;transitions&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;main&gt;
      test content of main page&lt;/br&gt;The navbar menu stays open when you click on the circle&lt;/br&gt;and it even opens on hover, not just on click.
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would put the drop down where it says "Solutions" in the navbar:</p>
  
  <p><a href="https://i.stack.imgur.com/MKi1s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MKi1s.png" alt="Where I would put the hover+onclick pure CSS (no JavaScript) dropdown menu"></a></p>
  
  <p>How could I make this work with the default bootstrap 3 navbar menu? </p>