html - CSS Transition Accordion Radio Doesn't work using height: auto or max-height (Edited) -

using radio buttons trigger hidden/shown accordion menu. works in jsfiddle... not work in other browser i've tried. i'm assuming small i've miss typed or missing or i'm totally lost. i'm aware not works right in browsers/setups/etc i've read/understood work?

edit: max-height not work in jsfiddle either... must problem. want ul auto expand length of it's li list. using fixed height not work. height: auto; max-height; neither work..

any , appreciated it.

html

<section class="container"> <div>     <input id="test1" name="acctest" type="radio" checked />     <label for="test1">about us</label>     <ul>         <li>test</li>         <li>test2</li>     </ul> </div> <div>     <input id="test2" name="acctest" type="radio" />     <label for="test2">about us</label>     <ul>         <li>test</li>         <li>test2</li>     </ul> </div> 

css

.container ul{ background: rgba(255, 255, 255, 0.5); margin: 0px; overflow: hidden; height: 0px; position: relative;     margin: 0; z-index: 1;     -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     transition: height 0.5s ease-in-out, box-shadow 0.9s linear;} .container li{     height: 25px;     color: #000;     font-size: 12px;} .container input:checked ~ ul{     -webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     -moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     -o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     -ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     transition: height 0.5s ease-in-out, box-shadow 0.9s linear;     max-height: 50px;} 

updated jsfiddle link: http://jsfiddle.net/etaxr/2/

thanks again!

so found css transition auto height not working (click title link)

props christofer vilander answer , fiddle link.

i edited fiddle on radio buttons (the demo used checkboxes) , changed of class/id names... , works... seems needed define ul more did.

http://jsfiddle.net/3wk9y/11/

<div class="ac-container"> <div>      <input id="ac-1" name="accordion-1" type="radio" checked/>     <ul class="ac-small">         <li>some content</li>     </ul>     <label for="ac-1">about us</label>  </div>      <div>         <input id="ac-2" name="accordion-1" type="radio" />     <ul class="ac-small">         <li>some more content</li>         <li>test</li>     </ul>     <label for="ac-2">about us</label> </div> </div> 

see fiddle css plz... longer , more detailed.