html - CSS only collapsing menu only works in firefox, not webkit browsers, why? -

got earlier on how collapsing menu work. of sudden links in won't work. contract the menu again. ideas?

thanks lot!

css:

#list, .show {display: none; } .hide:focus + .show {display: inline; } .hide:focus { display: none; } .hide:focus ~ #list { display:block; } @media print { .hide, .show { display: none; } } li.folding {list-style-type:none; margin-left:-20px;} 

html:

<div> <a href="#" class="hide">[link]</a> <a href="#" class="show">[link]</a> <ol id="list">     <li class="folding"><a href="http://www.google.com">item 1</a></li>     <li class="folding"><a href="http://www.google.com">item 2</a></li>     <li class="folding"><a href="http://www.google.com">item 3</a></li> </ol> </div> 

your code works fine is..

working jsfiddle. ( in firefox ! )

the problem more browser compatibility, run jsfiddle in firefox , work expect, on chrome , safari not work.

the better solution (for browsers), use javascript/jquery hide , show menu on click of button, work across mobiles, tables & browsers consistently minimal code.

---

update

here quick example of getting working using jquery. can see code small, easy read , extend, , work on browsers!

view jsfiddle

html:

<div> <a href="#" class="toggler">[link]</a> <ol id="list">     <li class="folding"><a href="http://www.google.com">item 1</a></li>     <li class="folding"><a href="http://www.google.com">item 2</a></li>     <li class="folding"><a href="http://www.google.com">item 3</a></li> </ol> </div> 

javascript/jquery:

// when page loaded , ready $(function(){     // on click of `.toggler` (the <a> class `.toggler`)     $('.toggler').click(function(){         // toggle list menu (toggle means if hidden show it, else hide it)         $('#list').fadetoggle(); // try.. `slidetoggle()`     }); }); 

the above html & javascript same thing, except work on devices!

view jsfiddle - javascript/jquery version