<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>使用雙層滑動門實現三態半透明效果菜單</title><style type="text/css">.menu ul { font-family:Arial; font-size:14px; padding:0 0 0 8px; margin:0 auto; list-style:none; height:35px; white-space:nowrap; //防止IE下單個功能表項目中間折行}.menu ul li { float:left; margin:0 2px;}.menu ul li a { display:block; float:left; line-height:35px; color:#666666; text-decoration:none; padding:0 0 0 14px; background:url(three-state-navi-background.gif);}.menu ul li a b { display:block; padding:0 14px 0 0; background:url(three-state-navi-background.gif) no-repeat right top;}.menu ul li a:hover { color:#FFFFFF; background:url(three-state-navi-background.gif) no-repeat left center;}.menu ul li a:hover b { background:url(three-state-navi-background.gif) no-repeat right center;}.menu ul li.current a { //對當前頁面連結所在功能表項目進行特殊設定 color:#FFFFFF; background:url(three-state-navi-background.gif) no-repeat left bottom;}.menu ul li.current a b { background:url(three-state-navi-background.gif) no-repeat right bottom;}.menu ul li.current a:hover { background:url(three-state-navi-background.gif) no-repeat left bottom; cursor:default;}.menu ul li.current a:hover b { background:url(three-state-navi-background.gif) no-repeat right bottom;}</style></head><body><div class="menu"><ul> <li><a href="#"><b>Home</b></a></li> <li><a href="#"><b>Connect</b></a></li> <li><a href="#"><b>Web Dev</b></a></li> <li><a href="#"><b>Web Design</b></a></li> <li class="current"><a href="#"><b>Map</b></a></li></ul></div></body></html>
素材下載:http://files.cnblogs.com/likebeta/201205292523211.zip