文字变化的导航菜单

2013-10-03 23:54:06 -0400

转自网页教学网

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<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="#">网页教学Home</A> </LI>
<LI><A class=bi
href="#">产品购买Products</A> </LI>
<LI><A class=bi
href="#">服务支持Services</A>
</LI>
<LI><A class=bi
href="#">技术交流FAQ</A>
</LI>
<LI><A class=bi
href="#">方案案例E-solution</A>
</LI>
<LI><A class=bi
href="#">关于京成About</A> </LI>
<LI><A class=bi
href="#">联系我们Contact
Us</A> </LI>
<LI><A class=bi
href="#">加入我们Join</A>
</LI>
<LI><A class=bi
href="#">下载支持Download</A>
</LI></UL></BODY></HTML>

演示：。。。。

«Newer Older»

Back to home

Subscribe | Register | Login | N