Cara Membuat Menu Keren Menggunakan CSS

1. Buat Gadget HTML/JavaScript
2. Masukkan kode dibawah

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

3. Ganti tanda pagar "#" yang berwarna merah di atas dengan Link yang Anda inginkan.