CSS Vertical Menu Tutorials-Menu 17

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'>
#button {
    width: 12em;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Tahoma, Arial, sans-serif;
            /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
    font-size : 10px;
    background-color: #90bade;
    color: #333;
    }

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

    #button li {
            border-bottom: 1px solid #90bade;
            margin: 0;
            list-style: none;
            list-style-image: none;
            }

    #button li a {
            display: block;
            padding: 5px 5px 5px 0.5em;
            border-left: 10px solid #1958b7;
            border-right: 10px solid #508fc4;
            background-color: #2175bc;
            color: #fff;
            text-decoration: none;
            width: 100%;
            }

    html>body #button li a {
            width: auto;
            }

    #button li a:hover {
            border-left: 10px solid #1c64d1;
            border-right: 10px solid #5ba3e0;
            background-color: #2586d7;
            color: #fff;
            }

    #button li #active {
            border-left: 10px solid #1c64d1;
            border-right: 10px solid #5ba3e0;
            background-color: #2586d7;
            color: #fff;
            }
</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="button">
                
<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