Advanced CSS Menu For Blogger

I would like to say thanks to web designer wall for this amazing menu.This Navigation menu is really awesome,it is having three buttons and if you want to add more than you can add it with help of Photoshop.So have it in your Blog.

Steps To Add This Amazing Menu

• Go to Dashboard.
• Go to Layout.
• Add a Gadget >> Html/Javascript.
• Paste the below code there.

<style>
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/menu-bg.jpg) no-repeat;
  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(http://i1269.photobucket.com/albums/jj591/aditya9172/home.gif) no-repeat;
  left: 96px;
  top: 73px;
}
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;
}

#menu .about {
  width: 131px;
  height: 51px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/about.gif) no-repeat;
  left: 338px;
  top: 97px;
}
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;
}

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
}
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(http://i1269.photobucket.com/albums/jj591/aditya9172/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;
}​
</style>
<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>

• Now, Click on Save.

It's Done.

Categories: Blogger Tricks , CSS