title: How to change hover effect to onclick only for a drop down menu
body: <p>I've tried everything I can possibly think of and I can't get my test site to act similar to the example site button menu that moves upward on click (right now mine only works on hover). I've tried multiple drop down menus, javascript, css, accordion menus, fake on-click tutorials, etc... nothing works for my site.</p>
  
  <p>I got everything to work correctly, except the onclick function. How can I get the current hover effect on my site to trigger only when I click the button first? Also, when I click another button, the previous one collapses back down to its normal state and the new clicked button opens like the hover state?</p>
  
  <p>I think the hover effect is just to annoying/busy and I will need to make it responsive for mobile devices, so onclick seems the best route.</p>
  
  <p>I've attached pictures of the buttons I'm referring to, Links to my site and the example site I'm trying to get to work like, and my css and html. If anyone can help, you'd be the most amazing person in the world!!!</p>
  
  <pre><code>&lt;div class="wrapper clearfix" id="insurance-buttons"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Auto&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Auto&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Motorcycle&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Boat&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;ATV&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Homeowners&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Condo / Co-op&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Flood Insurance&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Life &amp;amp; Health&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Umbrella&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Life&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Health&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Business&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Business Owners&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;General Liability&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Commercial Auto&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Workers Compensation&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  
  
  #insurance-buttons a { 
      display: block; 
      text-decoration: none; 
  }
  #insurance-buttons ul li ul li {
      width: 100%; 
      padding: 3px; 
      background: #fff;
      z-index:1;
  }
  #insurance-buttons ul li ul li a { 
      font-variant: small-caps;
      font-size:24px;
      line-height:25px;
      padding: 15px 0 !important;
  }
  #insurance-buttons li{ 
      position:relative; 
      float:left;
  }
  #insurance-buttons ul li ul, #insurance-buttons:hover ul li ul, #insurance-buttons:hover ul li:hover ul li ul { 
      display:none;
      list-style-type:none; 
      width: 101%;
  }
  #insurance-buttons:hover ul, #insurance-buttons:hover ul li:hover ul, #insurance-buttons:hover ul li:hover ul li:hover ul { 
      display:block;
  }
  #insurance-buttons:hover ul li:hover ul { 
      position: absolute;
      margin-top: 1px;
      margin-left:-3px;
  }
  #insurance-buttons&gt;ul&gt;li:hover&gt;ul { 
      bottom:100%;
      border-bottom: 1px solid transparent;
  }
  
  #insurance-buttons ul {
      width:100%;
  }
  #insurance-buttons ul li {
      width:25%;
      float:left;
      text-align:center;
      text-transform:uppercase;
      font-size:42px;
      line-height:42px;
      font-family: 'Khand', sans-serif; 
      font-weight: 500 !important; 
      color:#fff;
  }
  #insurance-buttons ul li a {
      text-decoration:none !important; 
      padding:10px 15px !important;
      border-right: 4px solid  #fff;
  }
  #insurance-buttons ul li a:last-child {
      border-right: none;
  }
  </code></pre>
  
  <p><a href="http://www.taggrafx.com/testing/CIA/index.html" rel="nofollow noreferrer">http://www.taggrafx.com/testing/CIA/index.html</a>
  <img src="https://i.stack.imgur.com/VqOyj.jpg" alt="My site">
  <a href="http://www.nationwide.com" rel="nofollow noreferrer">http://www.nationwide.com</a>
  <img src="https://i.stack.imgur.com/Z9SRa.png" alt="Site I&#39;m trying to get to function like"></p>