http://www.865171.cn/css-menu/detail-20.aspx

演示效果截图

用到的图片

CSS代码

 .menulist a{color: black;display: block;width: 170px;height: 20px;
padding-left: 5px;padding-top: 1px;margin-bottom: 5px;background-image: url(menu.jpg);
background-repeat: no-repeat;background-position: left top;text-decoration: none;
font-weight: bold;}
.menulist a:hover{background-image: url(menuover.jpg);}
.gmenulist a{color: black;display: block;width: 170px;height: 20px;
padding-left: 5px;padding-top: 1px;margin-bottom: 5px;background-image: url(tabsquare.jpg);
background-repeat: no-repeat;background-position: left top;text-decoration: none;
font-weight: bold;}
.gmenulist a:hover{background-image: url(tabsquareover.jpg);}

HTML代码

 <div class="menulist">
<a href="http://www.865171.cn">Home</a>
<a href="http://www.865171.cn">Submit</a>
<a href="http://www.865171.cn">Resources</a>
<a href="http://www.865171.cn">Contact</a>
</div>
<div class="gmenulist">
<a href="http://www.865171.cn">Home</a>
<a href="http://www.865171.cn">Submit</a>
<a href="http://www.865171.cn">Resources</a>
<a href="http://www.865171.cn">Contact</a>
</div>
www.865171.cn