Tweet
#vernav ul { list-style: none; margin: 0; padding: 0; }
#vernav img { border: none; }
#vernav { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; }
#vernav li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#vernav li a:link, #vernav li a:visited { color: #CCC; display: block; background:#000000 ; padding: 8px 0 0 10px; }
#vernav li a:hover { color: #FFF; background:#000000 0 -32px; padding: 8px 0 0 10px; }
</style>
<ul>
<li><a href="#1">Menu 1</a></li>
<li><a href="#2">Menu 2 </a></li>
<li><a href="#3">Menu 3</a></li>
<li><a href="#4">Menu 4</a></li>
<li><a href="#5">Menu 5</a></li>
</ul>
</div>
Then save your template. You can add as many link you like. You can also download the demo html file from here before implementing on your blog.
Previously, I have shown how to implement horizontal navigation menu on your blog. In this post, I will show you how to implement vertical navigation menu on your blog.
First paste this piece of CSS code in your head section just above the </head> line.
<style type='text/css'>
The above CSS code is used to define the look of the navigation menu. Now, to display the menu on your blog you have to paste a piece of HTML code in the <body> section.
In the <body> section look for a line like this <div id='sidebar-wrapper> or <div id='sidebar'>. It is different for different templates. But in most of the templates the word "sidebar" is present. So you shouldn't have any problem finding this. Once you have found that line, paste the following HTML code just below that line.
<div id="vernav">
