Advanced CSS Menu For Blogger

After my previous tutorial on jQuery Moving Boxes Plugin for Blogger, Today I am going to give a tutorial on Advanced CSS menu. This menu works with pure CSS & doesn't use even a single  piece of JavaScript or jQuery code.
You can view the demo here. Now lets start.

1. Go to Layout & 'add a gadget'
2. Select HTML/JAVASCRIPT from the list.
3. Paste the following code in editor.

 <ul id="menu">
        <li><a href="#" class="home">Home <span></span>
        </a></li> <li><a href="#" class="about">About <span></span>
        </a></li> <li><a href="#" class="rss">RSS <span></span></a>
        </li></ul>
<STYLE>
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  position: relative;
}
#menu span {
  display: none;
  position: absolute;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu a:hover span {
  display: block;
}
#menu .home {
  width: 144px;
  height: 58px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiia60p3BRDcA25zvSm3N1Sts_UJ9P_3fmr-eoLJ7-IS_2tvR8QDOU1S9cQhr76_6cnMF6pPWFz9mSZ3LSwJd7-XB0PwA79TH2YTFba3GFg1oCTdw0UD_1CudobvgD3c0C_9d20_lKub-Nb/s1600/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}    
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhptGsakG2ZoPCHJr6TUXCDnBBzVXk02f5nx5iJLaeV4Qq6Idc-3bDUo6RrJCMVgvIHDgr3RzUBecVnZG461PkZmamAGLdlQtyVFNeEE6Kz8LjL0iG4_lDKtGU6-rP8ZGD9lmVVFmRIoa7K/s1600/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}
#menu .about {
  width: 131px;
  height: 51px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXg_c1O3o2L_JfVuILxupRApK6Gm1vifFXVLA5xe0mXtOlFWYJmWh_xbYmm0j5ioKr_qWmHLCkrvTrdyAyB6QaBXCQM_xvrAMMiuiJCsZRScPKRnM7DjZlpsUIG_x7sj7MvSBhVT9FLJgL/s1600/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiokhEr7SnSk5U5TZJns9PBhUSq7SfX8BJlXakbdW55WFM9Bp7rpaj3xMryny_xav1JTHNekbkXUPmFEtGMVvyhfcXmlGAsHZyqMrfupR6m56GPWnv3siHgBdDZxafSfe3WNzwKvrTTCT4V/s1600/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}
#menu .rss {
  width: 112px;
  height: 47px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jUnPsgrOYuA0vEekX1NM-iwLr8E8dYjAzBDpYhtSHvX7c9PQmOGTi0ioDeQpZanatr5t7w8oSj1bxtWH3vG1DDKmigunY_y2aFBx8YUHKTVboIBGrMzH6m1hF3J3LQyycb5XA8gl2jVJ/s1600/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJOL97nUzvJT6BUKY0Wh7pVQ64UIeGjRLSRIaofwsG-JylRKXssPwAqwwLwmHgDlkEQJib4ghmVtWxanH6ZnqLcWLnwGSkG5TztWwuQx6jSfm8q98EwLZN2D8bZbUfvcxHORMk9OQ45c2b/s1600/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}
</STYLE>

Now replace the '#' with your link. And enjoy blogging.