Add CSS Vertical Menu to blogger

hello friend in this posts we know how we can add css  menu button in you blog follow this simple step and add css vertical menu button in your blog


1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Find (Ctrl +F) </head> tag .
3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
ul {list-style: none;
margin: 0;
padding: 0;
}

img {
border: none;
}
#menu4 {
  width: 200px;
  margin: 10px;
  border-style: solid solid none solid;
  border-color: #000;
  border-size: 1px;
  border-width: 1px;
  }

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

#menu4 li a:link, #menu4 li a:visited {
  color: #CCC;
  display: block;
  background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYozZ4rOZ_z51USUTUxKqbZ49RvBhKVWCYfju8jXGg2FovqSYp5PE4G1pBeBvDGOoKOY_33YccnqjjsDD6JzVjLL9mkOXAvm7P8oe7vGNWAyHxzuENmNKVa09KoKLnWRMp99PH6vEpeQsb/);
  padding: 8px 0 0 10px;
  }

#menu4 li a:hover, #menu4 li #current {
  color: #FFF;
  background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYozZ4rOZ_z51USUTUxKqbZ49RvBhKVWCYfju8jXGg2FovqSYp5PE4G1pBeBvDGOoKOY_33YccnqjjsDD6JzVjLL9mkOXAvm7P8oe7vGNWAyHxzuENmNKVa09KoKLnWRMp99PH6vEpeQsb/) 0 -32px;
  padding: 8px 0 0 10px;
  }
</style>

Note : Please Host image yourself.
4.Save your template.
5.Now 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="menu4">
<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="#">Photoshop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>

</ul>
</div>

7.Now you are done.It will look like this:

CSS Black Vertical Menu

Demo