CSS Vertical Tab Menu Tutorials-Menu 16

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>
#navcontainer {
      background: #f0e7d7;
      width: 30%;
      margin: 0 auto;
      padding: 1em 0;
      font-family: georgia, serif;
      font-size: 13px;
      text-align: center;
}

ul#navlist {
      text-align: left;
      list-style: none;
      padding: 0;
      margin: 0 auto;
      width: 70%;
}

ul#navlist li {
      display: block;
      margin: 0;
      padding: 0;
}

ul#navlist li a {
      display: block;
      width: 100%;
      padding: 0.5em 0 0.5em 2em;
      border-width: 1px;
      border-color: #ffe #aaab9c #ccc #fff;
      border-style: solid;
      color: #777;
      text-decoration: none;
      background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a {
      background: #f0e7d7;
      color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover {
      color: #800000;
      background: transparent;
      border-color: #aaab9c #fff #fff #ccc;
}
</style>

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="navcontainer">
                    
<ul id="navlist">
                         
<li><a href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">Java Script</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>
            
</div>

You are done.

Demo