演示效果截圖

用到的圖片

CSS代碼

<style type="text/css">

* {margin:0;padding:0;font:normal 14px/25px "宋體";}

body {background:#f8f8f8;}

ul {list-style:none;width:510px;height:25px;margin:20px auto;}

li {float:left;width:86px;height:25px;

text-align:center;margin:0 -5px;display:inline;}

a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;

background:url(tixingdaohang03.gif) center center no-repeat;}

a:hover {color:#000;width:86px;position:relative;

background:url(tixingdaohang02.gif) 0 0 no-repeat;}

</style>

HTML代碼

<ul style="padding-left:8px">

<li><a >菜單</a></li>

<li><a >菜單</a></li>

<li><a >菜單</a></li>

<li><a >菜單</a></li>

<li><a >菜單</a></li>

</ul>

<h3 style="padding-left:8px;font-size:24px;">

www.865171.cn</h3>