用CSS制作的文字变化的导航菜单。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a>401-19991224/loose.dtd"> <!-- saved from url=(0023)http://www.itjxue.com/ --> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE></TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> #nav { FONT-SIZE: 12px; LIST-STYLE-TYPE: none } #nav LI { FLOAT: left; MARGIN-RIGHT: 1px } .bi { POSITION: relative } #nav LI A { DISPLAY: block; WIDTH: 65px; COLOR: #000000; LINE-HEIGHT: 30px; TEXT-ALIGN: center; TEXT-DECORATION: none } .bi SPAN { LEFT: -999px; VISIBILITY: hidden; POSITION: absolute; } .bi:hover SPAN { DISPLAY: block; WIDTH: 65px; COLOR: #000000; LINE-HEIGHT: 30px; TEXT-ALIGN: center; TEXT-DECORATION: none; LEFT: 0px; VISIBILITY: visible; CURSOR: pointer; TOP: 0px; BACKGROUND: #ffffff 30px 8px; COLOR: #000000; LINE-HEIGHT: 29px } #nav LI A:hover { BACKGROUND: #ffffff 30px 8px; COLOR: #000000; LINE-HEIGHT: 29px } </STYLE> <BODY> <UL id=nav> <LI><A class=bi href="#"><a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=+++%C' target='_blank'><u>网页</u></a>教学<SPAN>Home</SPAN></A> </LI> <LI><A class=bi href="#">产品购买<SPAN>Products</SPAN></A> </LI> <LI><A class=bi href="#">服务支持<SPAN>Services</SPAN></A> </LI> <LI><A class=bi href="#">技术交流<SPAN>FAQ</SPAN></A> </LI> <LI><A class=bi href="#">方案案例<SPAN>E-solution</SPAN></A> </LI> <LI><A class=bi href="#">关于京成<SPAN>About</SPAN></A> </LI> <LI><A class=bi href="#">联系我们<SPAN>Contact Us</SPAN></A> </LI> <LI><A class=bi href="#">加入我们<SPAN>Join</SPAN></A> </LI> <LI><A class=bi href="#">下载支持<SPAN>Download</SPAN></A> </LI></UL></BODY></HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]