CSS制作不规则导航
转载自52css.com，实际项目中经常用到，所以收藏下
[code]
<li><a href="#" title="菜单">菜单</a></li>
<li><a href="#" title="菜单">菜单</a></li>
<li><a href="#" title="菜单">菜单</a></li>
</ul>
［/code]
[code]
body {background:#f8f8f8;}
ul {list-style:none;width:300px;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(***.gif) center center no-repeat;}
a:hover {color:#000;background:url(***.gif) 0 0 no-repeat;width:86px;position:relative;}
[/code]
实现思路：
主要是利用当:hover触发的时候让a定位，出了li的浮动范围，出现梯形的图片。从而实现了不规则导航的菜单。
编码过程：
1、在浏览器中，根据li的结构表现，后面的li会覆盖住前面的li，如果宽度足够的话，是靠边在一起，那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px;
2、初始状态下的叠加实现了，要解决的就是:hover触发的时候，让<a href="#" title="菜单">菜单</a>这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话，会让有一个z-index的问题出现。
这个问题只体现在IE中，FF下是无问题的，可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li，那么当鼠标经过的时候就无法完美显示了。
最终代码：
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Linxz" />
<title>CSS布局实例：制作不规则形状的CSS导航菜单 - http://www.52css.com%3c/title>
<style type="text/css">
* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;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(attachments/month_0804/o2008424202323.gif) center center no-repeat;}
a:hover {color:#000;background:url(attachments/month_0804/f2008424202316.gif) 0 0 no-repeat;width:86px;position:relative;}
</style>
</head>
<body>
<ul>
<li><a href="#" title="菜单">菜单</a></li>
<li><a href="#" title="菜单">菜单</a></li>
<li><a href="#" title="菜单">菜单</a></li>
</ul>
</body>
</html>
[/code]
在IE6中出现问题的补充：
此案例在IE6浏览器中运行时，最左侧的菜单被“切”掉了一个角，这是由IE6对宽度理解的不同造成。为了避免这一情况的出现，我们在合理计算尺寸的情况下，给ul增加一个左内边距，即：padding-left。就可以合理的解决此问题。修改ul的CSS样式编码如下：
Example Source Code [www.52css.com]
比较重要的几个属性：
1、li中的负边距，实现叠加效果
2、:hover中的position:relative
3、a是内联元素，要触发haslayout，可以使用float:left来触发
