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

发表评论

Your email is never shared. Required fields are marked *

*
*