JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<nav class="rotate right">
    <ul>
        <li><a href="1.html" target="_self">Link 01</a></li>
        <li><a href="2.html" target="_self">Link 02</a></li>
        <li><a href="3.html" target="_self">Link 03</a></li>
        <li><a href="4.html" target="_self">Link 04</a></li>
        <li><a href="5.html" target="_self">Link 05</a></li>
    </ul>
</nav>

<div class="note">
    How can I make the <span>nav's height</span> be 100% so that when a person hovers their cursor anywhere on the right side, the text appears?<br/><br/>
    <img src="http://i59.tinypic.com/x6e6pc.png"/>
</div>

CSS

nav { position:fixed; font-size:120%; }
nav ul { display:block; height:100%; }
nav ul li { float: left; height:20%; }
nav > ul { display: inline; list-style-type:none; } 
nav a { text-align: center; display: block; margin-left: 10px; margin-right: 10px; }
a, a:hover, a:active, a:visited { text-decoration:none; color: #212121; background:rgba(0, 133, 19, 0.8); }
nav ul a { opacity:1; }
nav ul a.on { opacity: 1; }
nav:hover ul:hover a:hover { opacity: 1; }
nav a:before { content: "( "; opacity:0; }
nav a:after { content: " )"; opacity:0; }
nav a:hover:before { content: "( "; opacity:1; }
nav a:hover:after { content: " )"; opacity:1; }


/* rotate */
.rotate.right { -webkit-transform-origin:50%; -moz-transform-origin:50%; -ms-transform-origin:50%; -o-transform-origin:50%; transform-origin:50%; -webkit-transform:translate(50%, -50%) rotate(90deg); -moz-transform:translate(50%, -50%) rotate(90deg); -ms-transform:translate(50%, -50%) rotate(90deg); -o-transform:translate(50%, -50%) rotate(90deg); transform:translate(50%, -50%) rotate(90deg); top:50%; right:30px; }





/* general rules and note. irrelevent */
* { margin:0; padding:0; }
html, body, nav, h2, .rules { font: normal normal 100%/1.65 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; color: #212121; }
div.note { top: 50px; left:50px; width: 25%; height: 10%; position:fixed;}
div.note span { color:green; }
div.note img { height:300px; width: auto; }