Create a vertical menu with css

Another popular method of navigation is the vertical css menu. An example of a vertical css menu is on the left side of this page.

To create a vertical menu we use an altered list much like a horizontal menu. Because you may want to use this menu more than once on a page give it a "class" designation.

The css for a vertical css menu

.navleft {
font-family: Arial, Vedanta, sans-serif;
text-decoration: none;
}
.navleft a {
text-decoration: none;
font-size: 100%;
font-variant:small-caps;
font-weight:bold;
color: #000099;
}
.navleft a:hover {
color:#990000;
}
.navleft ul {
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.navleft li {
list-style-type: none;
line-height: 25px;
text-align: center;
}

Copy this css code to your .css file.

The html code for your vertical menu

<div id="left-side">Left side panel<div class="navleft">
<ul><li><a href="/">a page</a></li>
<ul><li><a href="/">a page</a></li>
<ul><li><a href="/">a page</a></li>
<ul><li><a href="/">a page</a></li>
</ul></div></div >

Add this html code to the left side panel of your page.

preview

---