<style>

a.mid{
background:#FFC0C0;
width:76px;
display:inline-block;
text-align:center;
color:#fff;
margin-bottom:1px;
font:11px arial;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
padding:1px;
border:1px solid #FFC0C0;
cursor:pointer;
}

a.mid:hover{
background:#ffffff !important;
border:1px solid #FFC0C0;
box-shadow:none;
color:#FFC0C0;
}

::-webkit-scrollbar {
background:#eee;
width: 6px;
height: 7px;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #FFD7D7;
}


@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
 </style>
<div style="width:250px;">


<center><a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >cbox</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >linkies</a>
<a class="mid" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >Tab 3</a>
</center>

<div id="wnsb" style="margin-top:5px;width:230px; padding:10px; border:1px dashed #ddd;">
cbox codes</div>

<div id="1" style="display: none;">
cbox codes again </div>

<div id="2" style="display: none;">
<div style="height:250px;overflow-x:hidden; overflow-y:scroll;"><style>
.raejun{
width:75px;
padding:4px;
margin:2px;
background:#eee;
font:8px tt;
text-align:center;
Text-decoration:none;
color:#888;
text-transform:uppercase;
display:inline-block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-right:20px solid #aaa;
}

.raejun:hover{
width:95px;
background:#aaa;
color:#fff;
border-right:0px solid #aaa;
}

@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>

<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
<a class="raejun" href="LINK HERE">link 1</a>
<a class="raejun" href="LINK HERE">link 2</a>
<a class="raejun" href="LINK HERE">link 3</a>
<a class="raejun" href="LINK HERE">link 4</a>
</div>
</div>

<div id="3" style="display: none;">
This navigation no.3
</div>

</div>