一款简单的梯形CSS导航菜单

演示效果截图

用到的图片

CSS代码

<style type="text/css">
* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#f8f8f8;}
ul {list-style:none;510px;height:25px;margin:20px auto;}
li {float:left;86px;height:25px;
text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;86px;height:25px;top:0;left:0;
background:url(tixingdaohang03.gif) center center no-repeat;}
a:hover {color:#000;86px;position:relative;
background:url(tixingdaohang02.gif) 0 0 no-repeat;}
</style>

HTML代码

<ul style="padding-left:8px">
<li><a href="http://www.865171.cn">菜单</a></li>
<li><a href="http://www.865171.cn">菜单</a></li>
<li><a href="http://www.865171.cn">菜单</a></li>
<li><a href="http://www.865171.cn">菜单</a></li>
<li><a href="http://www.865171.cn">菜单</a></li>
</ul>
<h3 style="padding-left:8px;font-size:24px;">
www.865171.cn</h3>