JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav" class="tran2">
<a href="#" class="hide">[Contents]</a><a href="#" class="show">[Contents]</a> 
<ol id="menu" class="tran15">
    <li><a href="http://my.opera.com/coreymwamba/blog/2010/04/17/a-simple-svg-player">A simple SVG audio player</a></li>
    <li><a href="http://my.opera.com/coreymwamba/blog/expo-dock-paging-using-css3-and-a-bit-of-javascript-and-lots-of-php">Expo-dock paging in HTML5 and CSS</a></li>
    <li><a href="http://www.coreymwamba.co.uk">Bask in my shameless publicity</a></li>
    <li><a href="http://en.wikipedia.org/wiki/Debt">Have a look at something the world owns!</a></li>
    <li><a href="http://www.opera.com">An awesome browser</a>
</ol>
</div>

CSS

*{font-size: 100%; font-family: "liberation sans", arial, sans-serif; color: black; }

/* Trans props */
.tran15{
    -o-transition: all 0.75s;
    -moz-transition: all 0.75s;
    -webkit-transition: all 0.75s}
.tran2 {
    -o-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s}
/* Container */
#nav {
    padding: 1ex;
    border: 2px solid #aaa;
    background-color: #ccf; 
    margin: 1em; width: 20em}
#nav:hover {
    border: 2px solid #ddd; 
    background-color: #eef}
/* Header*/
#nav h2 {
    display: inline; 
    vertical-align: middle}
/* Controls */
.hide, .show{ 
    display: none;  
    font-size: 80%; 
    vertical-align: middle; }

@media all and (min-width:1px) { 
    .hide, .show  { 
        display: inline}}

a.hide:focus + .show {
    display: inline}
.show { 
    display: none}
a.hide:focus { 
    display: none}

#menu { 
    opacity: 0; 
    height:0; 
    margin-top: 0em; 
    width: auto; 
    margin-left: -1ex; 
    overflow: hidden}
a.hide:focus ~ #menu { 
    opacity: 1; 
    height:7em;
}
    width: auto}}