How to change hover effect to onclick only for a drop down menu

Question

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.

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?

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.

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!!!

<div class="wrapper clearfix" id="insurance-buttons">
        <ul>
            <li><a href="#">Auto</a>
                <ul>
                    <li><a href="#">Auto</a></li>
                    <li><a href="#">Motorcycle</a></li>
                    <li><a href="#">Boat</a></li>
                    <li><a href="#">ATV</a></li>
                </ul>
             </li>
             <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">Homeowners</a></li>
                    <li><a href="#">Condo / Co-op</a></li>
                    <li><a href="#">Flood Insurance</a></li>
                </ul>
             </li>
             <li><a href="#">Life &amp; Health</a>
                <ul>
                    <li><a href="#">Umbrella</a></li>
                    <li><a href="#">Life</a></li>
                    <li><a href="#">Health</a></li>
                </ul>
             </li>
             <li><a href="#">Business</a>
                <ul>
                    <li><a href="#">Business Owners</a></li>
                    <li><a href="#">General Liability</a></li>
                    <li><a href="#">Commercial Auto</a></li>
                    <li><a href="#">Workers Compensation</a></li>
                </ul>
             </li>
        </ul>
</div>


#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>ul>li:hover>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;
}

http://www.taggrafx.com/testing/CIA/index.html http://www.nationwide.com

Answer 1

I noticed you've still got the :hover pseudoclass in your CSS. If you're trying to trigger the menus on click, you cannot use the :hover pseudoclass . There's no faking it. So your first step is to replace the :hover pseudoclass with a proper class. Here is a generic example:

/* change anything like this */
.my-element:hover { ... styles ... }

/* to this */
.my-element.hover { .. styles ... }

For this next part, I'm going to assume jQuery, because it's quicker and easier to write.

Then, you need to detect a click on your element, apply the class, and remove it from your other elements. This can be done like so:

$('.my-element').on('click', function(e) {
  e.preventDefault();

  // remove .hover class from all other elements
  $('.my-element').removeClass('hover');

  // apply it to the current element
  $(this).addClass('hover');
});

These examples are not specific to your example, but it should get you on the right track.