How to edit this navigation to make it a click-through navigation, not a navigator?

Question

This is the next snippet I want to change. http://www.cssscript.com/simple-accordion-menu-with-css3-transitions/

heres demo http://www.cssscript.com/demo/simple-accordion-menu-with-css3-transitions/

I want to click on the drop-down list and it stays crashed until I click on another menu or the same one again.

Any idea on how I can do this?

Answer 1

Got a solution.

Here you will find: fiddle

.menu li a:focus + ul li a{ styles here} 

I also added the jQuery equivalent for JavaScript return false for anchors - because by default, the anchor with the a # link reloads the page if it cannot find this jump point. If your code allows this, you can use some element other than the anchor on the first level of the menu, and you don’t need JavaScript.

Answer 2

Use the target pseudo-class instead of hovering. Note. I added an identifier to each submenu and used a top-level item to refer to this section.

 .menu { margin: 0 auto; padding: 0; width: 350px; } .menu li { list-style: none; } .menu li a { display: table; margin-top: 1px; padding: 14px 10px; width: 100%; background: #337D88; text-decoration: none; text-align: left; vertical-align: middle; color: #fff; overflow: hidden; -webkit-transition-property: background; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; transition-property: background; transition-duration: 0.4s; transition-timing-function: ease-out; } .menu > li:first-child a { margin-top: 0; } .menu li a:hover { background: #4AADBB; -webkit-transition-property: background; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-property: background; transition-duration: 0.2s; transition-timing-function: ease-out; } .menu li ul { margin: 0; padding: 0; } .menu li li a { display: block; margin-top: 0; padding: 0 10px; height: 0; background: #C6DDD9; color: #1F3D39; -webkit-transition-property: all; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-property: all; transition-duration: 0.5s; transition-timing-function: ease-out; } /*This selector has changed*/ .menu > li > ul:target li a { display: table; margin-top: 1px; padding: 10px; width: 100%; height: 1em; -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease-out; } /*This selector has changed*/ .menu > li > ul:target li a:hover { background: #A4CAC8; -webkit-transition-property: background; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-property: background; transition-duration: 0.2s; transition-timing-function: ease-out; } 

 <nav id="menu_box"> <ul class="menu"> <li> <a href="#sub1">Menu 1</a> <!-- Note the href change here --> <ul id="sub1"><!-- Note the ID here --> <li><a href="#">Menu 1.1</a></li> <li><a href="#">Menu 1.2</a></li> </ul> </li> <li> <a href="#sub2">Menu 2</a> <ul id="sub2"> <li><a href="#">Menu 2.1</a></li> <li><a href="#">Menu 2.2</a></li> <li><a href="#">Menu 2.3</a></li> </ul> </li> <li> <a href="#sub3">Menu 3</a> <ul id="sub3"> <li><a href="#">Menu 3.1</a></li> <li><a href="#">Menu 3.2</a></li> <li><a href="#">Menu 3.3</a></li> <li><a href="#">Menu 3.4</a></li> </ul> </li> <li> <a href="#">Menu 4</a> </li> </ul> </nav>