How to edit this nav to make it a click nav instead of a hover nav?

Question

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

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

I want to click to dropdown and it stays dropped down until I click on another menu or the same one again.

Any idea on how I would be able to do this?

Answer 1

Use the target pseudo-class in place of hover. Note I've added an ID to each sub-menu and used the top level nav item to link to that 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>

Answer 2

Got a solution.

Here you go: fiddle

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

I've also added a jQuery equivalent of a JavaScript return false on links (anchors) - because by default, an anchor with a # link will reload the page if it can't find that jump point. If your code allows for it, you can use at the first level of the menu some other element besides an anchor and not have need for the JavaScript.