效果
<!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=gb2312" /> <title>很有创意的CSS导航</title> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> <body> <ul> <li class="home">home</li> <li class="about">about</li> <li class="rss">rss</li> </ul> </body> </html>
CSS文件
* { padding:0; margin:0; } ul{ width:774px; height:210px; background:url(../images/menu-bg.jpg) no-repeat; list-style-type:none; position:relative; margin:100px; } li.home { background:url(../images/home.gif) no-repeat; width:144px; height:58px; text-indent:-9999px; cursor:pointer; position:absolute; top:30px; left:80px; } li.home:hover { background-position:0 -58px; } li.about { background:url(../images/about.gif) no-repeat; width:131px; height:51px; text-indent:-9999px; cursor:pointer; position:absolute; top:70px; left:270px; } li.about:hover { background-position:0 -51px; } li.rss { background:url(../images/rss.gif) no-repeat; width:112px; height:47px; text-indent:-9999px; cursor:pointer; position:absolute; top:50px; left:510px; } li.rss:hover { background-position:0 -47px; }