CSS Vertical Menu Tutorials-Menu 10

Posted by Lasantha Bandara on November 16th, 2009 File Under : css0 Comment

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.

CSS Vertical Menu Tutorials

<style type='text/css'>
#menu10 {
      width: 200px;
      margin: 10px;

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

#menu10 img {
  border: none;

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

#menu10 li a:link, #menu10 li a:visited {
      color: #4D4D4D;
      display: block;
      background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sw9JqkYNBnI/AAAAAAAAAWc/oUU0PPh_iIU/menu10.gif);
      padding: 8px 0 0 10px;

#menu10 li a:hover, #menu10 li #current {
      color: #FF9834;
      background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sw9JqkYNBnI/AAAAAAAAAWc/oUU0PPh_iIU/menu10.gif) 0 -32px;
      padding: 8px 0 0 10px;

Note :Please Host menu10.gif yourself.
CSS Vertical Menu Tutorials

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


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



You are done.


File Under : css

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.