How to change dropdown show from hover to OnClick?

Question

I have a dropdown menu (responsive) and right now when user hover it dropdowns are shown and on mobile devices all level of dropdown are expanded.

I want to change it to be same like twitter bootstrap menu. So no hover to show dropdowns but show when user click on item. I have tried to add JS function onclick but it never get called.

Is there a way to make this without JavaScript but just a pure CSS?

This is my Fiddle: http://jsfiddle.net/5vmayb6o/

UPDATE

I have update Fiddle I succeeded to add JS function to show hide element. But I have a few problems still.

• When I click dropdown shows but hover work again but it shouldn't
• Third level dropdown still shows on hover.
• In small screen layout it doesn't work all elements are still visible.

HTML output:

<nav class="animenu">

    <input type="checkbox" id="button">
    <label for="button" onclick="">Menu</label>


                    <ul>
                        <li class="first selected bc">
                                <a href="http://localhost/2/en-us/">Home</a>

                        </li>
                        <li>
                                <a href="http://localhost/2/en-us/About-Us">About Us</a>
                                            <ul>
                        <li class="first">
                                <a href="http://localhost2/en-us/About-Us/StyleGuide">Style Guide</a>

                        </li>
                        <li class="last">
                                <a href="http://localhost2/en-us/About-Us/Test">Test</a>
                                            <ul class="animenu-third-level">
                        <li class="first">
                                <a href="http://localhost2/en-us/About-Us/Test/3rd-level">3rd level</a>

                        </li>
                        <li>
                                <a href="http://localhost2/en-us/About-Us/Test/First-Page">First Page</a>

                        </li>
                        <li>
                                <a href="http://localhos2/en-us/About-Us/Test/Second-Page">Second Page</a>

                        </li>
                        <li>
                                <a href="http://localhos2/en-us/About-Us/Test/Third-Page">Third Page</a>

                        </li>
                        <li>
                                <a href="http://localhost2/en-us/About-Us/Test/Fourth-Page">Fourth Page</a>

                        </li>
                        <li class="last">
                                <a href="http://localhos2/en-us/About-Us/Test/Fifth-Page">Fifth Page</a>

                        </li>
                </ul>

                        </li>
                </ul>

                        </li>


                </ul>


</nav>

Answer 1

try this

 $(function() { $('.animenu li').click(function(e) { $(this).find('> ul').addClass('show'); $(this).addClass('selected'); e.stopImmediatePropogation(); }); $(document).click(function(e) { if ($(e.target).closest('.animenu').length == 0) { $('.animenu .show').parents('li').removeClass('selected'); $('.animenu ul').removeClass('show'); } }) }); 

 .animenu > ul:after { content: ""; display: table; clear: both; } body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } .animenu { font: 13px Arial, Helvetica; } .animenu * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .animenu ul { margin: 0; padding: 0; list-style: none; } .animenu li { position: relative; } .animenu li > ul.show { opacity: 1; visibility: visible; margin: 0; } li { outline: none; } .animenu li.selected > a { color: white; background: #ff0000; } .animenu input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; } .animenu label { display: none; cursor: pointer; user-select: none; } .animenu > ul { background: #f1f1f1; } .animenu > ul > li { float: left; } .animenu > ul > li > a { float: left; padding: 1em 3em; text-transform: uppercase; } .animenu > ul a { color: #333; text-decoration: none; } .animenu > ul ul { position: absolute; top: 100%; left: 0; z-index: 1; opacity: 0; visibility: hidden; margin: 2em 0 0 0; background-color: #f1f1f1; background-image: none; -webkit-transition-property: margin, opacity; -moz-transition-property: margin, opacity; -o-transition-property: margin, opacity; transition-property: margin, opacity; -webkit-transition-duration: .15s; -moz-transition-duration: .15s; -o-transition-duration: .15s; transition-duration: .15s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .animenu > ul ul li { display: block; } .animenu > ul ul li:first-child > a {} .animenu > ul ul li:first-child > a:after { content: ''; position: absolute; left: 4em; top: -12px; border: 6px solid transparent; border-bottom-color: inherit; } .animenu > ul ul li:last-child { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .animenu > ul ul li:last-child > a {} .animenu > ul ul a { padding: 1em; width: 175px; display: block; border-color: #373737; } .animenu > ul ul a { /*background-color: #ff0000; border-color: #fff;*/ color: #ff0000; background-color: #f1f1f1; } @media screen and (max-width: 480px) { .animenu > ul, .animenu > ul ul { visibility: visible; opacity: 1; display: none; } .animenu input[type=checkbox]:checked ~ label, .animenu input[type=checkbox] ~ label:hover { color: white; } .animenu label { background-color: #f1f1f1; color: #333; text-transform: uppercase; position: relative; display: block; padding: 1em 3em; } .animenu label:before { position: absolute; left: 0.5em; top: 0.2em; content: "\\2261"; font-size: 2em; } .animenu > ul { position: relative; margin: 0.5em 0 !important; padding: 0.25em; background-color: #f1f1f1; background-image: none; } .animenu > ul:after { content: ''; position: absolute; left: 2em; top: -12px; border: 6px solid transparent; border-bottom-color: inherit; } .animenu > ul li { display: block; } .animenu > ul > li { float: none; border: 0; background-color: #f1f1f1; background-image: none; } .animenu > ul > li > a { float: none; display: block; padding: 1em; } .animenu > ul ul { position: static; background-color: #f1f1f1; background-image: none; margin: 0; -webkit-transition-property: none; -moz-transition-property: none; -o-transition-property: none; transition-property: none; } .animenu > ul ul li:first-child > a {} .animenu > ul ul li:first-child > a:after { content: none; } .animenu > ul ul li:last-child > a {} .animenu > ul ul a { padding-left: 2em; display: block; width: auto; } .animenu input[type=checkbox]:checked ~ ul { display: block; } .animenu input[type=checkbox]:checked ~ ul ul { display: block; } } @media screen and (max-width: 600px) { .animenu > ul > li > a { padding: 1em 2em; } } .animenu-third-level { left: 100% !important; top: 0 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="animenu"> <input type="checkbox" id="button"> <label for="button" onclick="">Menu</label> <ul> <li class="first selected bc"><a href="http://localhost/2/en-us/">Home</a> </li> <li tabindex="0"><a href="javascript:void(0);">About Us</a> <ul> <li class="first"><a href="http://localhost2/en-us/About-Us/StyleGuide">Style Guide</a> </li> <li class="last" tabindex="0"><a href="javascript:void(0);">Test</a> <ul class="animenu-third-level"> <li class="first"><a href="http://localhost2/en-us/About-Us/Test/3rd-level">3rd level</a> </li> <li><a href="http://localhost2/en-us/About-Us/Test/First-Page">First Page</a> </li> <li><a href="http://localhos2/en-us/About-Us/Test/Second-Page">Second Page</a> </li> <li><a href="http://localhos2/en-us/About-Us/Test/Third-Page">Third Page</a> </li> <li><a href="http://localhost2/en-us/About-Us/Test/Fourth-Page">Fourth Page</a> </li> <li class="last"><a href="http://localhos2/en-us/About-Us/Test/Fifth-Page">Fifth Page</a> </li> </ul> </li> </ul> </li> </ul> </nav> 

Answer 2

I think this is what you are looking for:

Drop Down Menu Just HTML & CSS
http://koen.kivits.com/articles/pure-css-menu/