CSS3过渡下拉onclick

Question

In the following example when you click Click me , a navigation menu opens.

Example

Does anyone know how to apply a css3 transition dropdown effect to the navigation-dropdown , since there is no :onclick in css? *

* while keeping navigation-dropdown on an auto height (I don't want a fixed height for the dropdown menu).

Code: (See example for the entire code)

<div id="navigation">
  <div id="navigation-sub">Click me</div>
</div>

<div id="navigation-dropdown">
  <ul>
    <li><a href="#">link one</a></li>
    <li><a href="#">link two</a></li>
    <li><a href="#">link three</a></li>
    <li><a href="#">link four</a></li>
  </ul>
  <ul>
    <li><a href="#">link five</a></li>
    <li><a href="#">link six</a></li>
    <li><a href="#">link seven</a></li>
    <li><a href="#">link eight</a></li>
  </ul>
  <ul>
    <li><a href="#">link nine</a></li>
    <li><a href="#">link ten</a></li>
    <li><a href="#">link eleven</a></li>
    <li><a href="#">link twelve</a></li>
  </ul>
  <input type="button" value="X"/>
</div>

Answer 1

You should just toggle a class on click and use a transition.

CSS

#navigation-dropdown {
    transition: 3s ease-out;
}
.hide {
    opacity: 0;
    height: 0 !important;
}

JS

function dropIt() {
    toggleClass(document.getElementById('navigation-dropdown'), "hide");
}

Demo