效果图 代码非常简单，主要是利用了负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