CSS实现不规则菜单实现

效果图

代码非常简单，主要是利用了负margin的效果：

CSS：

ul { list-style:none;}
li { float:left; width:87px; height:25px; text-align:center; line-height:25px; margin-left:-3px;}
li a { width:87px; height:25px; display:block; background:url(m_bg.gif) no-repeat; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;}
li a:hover { background:url(m_bg.gif) no-repeat 0 -25px;}

XHTML：

<ul>
	<li><a href="#">项目一</a></li>
	<li><a href="#">项目一</a></li>
	<li><a href="#">项目一</a></li>
	<li><a href="#">项目一</a></li>
</ul>

完整实例效果：/examples/menu01/menu.html