CSS Vertical Menu Tutorials-Menu 2

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'>
#menu2 {
      width: 200px;
      margin: 10px;
      border-style: solid solid none solid;
      border-color: #D8D5D1;
      border-size: 1px;
      border-width: 1px;
      }

#menu2 ul {
      list-style: none;
      margin: 0;
      padding: 0;
      }

#menu2 img {
  border: none;
}

#menu2 li a {
      height: 32px;
        voice-family: &quot;\&quot;}\&quot;&quot;;
        voice-family: inherit;
        height: 24px;
      text-decoration: none;
      }

#menu2 li a:link, #menu2 li a:visited {
      color: #3688BA;
      display: block;
      background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGioU37tHXvEQymQaI_-DPgU536sJZguS3pQouiEGeU0EpELTEigKT_D4yyylR_Mi-vQp0u3KzMGxBuUM2o19ziAWFNfXWf0X6NPbVu7lpJwZ5JigGXh3QIxzLEXudHvi9IYYUmLYzsBmr/);
      padding: 8px 0 0 30px;
      }

#menu2 li a:hover, #menu2 li #current {
      color: #3688BA;
      background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGioU37tHXvEQymQaI_-DPgU536sJZguS3pQouiEGeU0EpELTEigKT_D4yyylR_Mi-vQp0u3KzMGxBuUM2o19ziAWFNfXWf0X6NPbVu7lpJwZ5JigGXh3QIxzLEXudHvi9IYYUmLYzsBmr/) 0 -32px;
      padding: 8px 0 0 32px;
      }
</style>

Note :Please Host menu2.gif yourself.


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="menu1">

<ul>
                            
<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