Créer Onglet vertical en utilisant le html css

Salut,

Je suis en train de concevoir une page avec tabulation verticale. Mais je ne suis pas sûr de savoir comment parvenir à cette conception. Je ne veux pas utiliser de javascript, jquery etc. La planification pour créer des vues distinctes pour chaque onglet de l'élément de menu. Je peux donc changer l'onglet actif dans chaque vue. S'il vous plaît aider à résoudre ce problème. Je n'ai pas beaucoup de code pour l'afficher. Veuillez fournir des liens à déplacer dans la bonne direction.. Merci à l'avance.

C'est ce que j'ai fait pour réaliser la conception

<style>
#content
{
background-color: #f2f2f2;
padding: 20px 10px;
overflow: auto;
}
#tab-container
{
float: left;
margin: 50px 0 0 0;
width: 126px;
}
#tab-container ul
{
list-style: none;
text-align: center;
}
#tab-container ul li
{
border-top: 1px solid #666;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 8px solid #666;
background-color: #ddd;
margin: 8px 0;
}
#tab-container ul li a,
#tab-container ul li a:visited
{
text-decoration: none;
color: #666;
display: block;
padding: 15px 5px;
}
#tab-container ul li:hover
{
border-left: 8px solid #333;
}
#tab-container ul li a:hover
{
color: #000;
}
#tab-container ul li.selected
{
border-right: none;
background-color: #fff;
border-left: 8px solid #006699;
}
#main-container
{
min-height: 400px;
margin: 0 0 0 125px;
padding: 20px;
background-color: #fff;
border: 1px solid #888;
}
</style>
<div id="content">
<div id="tab-container">
<ul>
<li class="selected"><a href="">Introduction</a></li>
<li><a href="">Html</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
</ul>
</div>
<div id="main-container">
<h1>Put your content here...</h1>
</div>
</div>