<style type="text/css">
ul,li{
margin:0;
padding:0;
float:left;
display:block;
list-style-type: none;
}
.bi{
position: relative;
z-index: 0;
}
.bi:hover{z-index: 99;}
.bi:hover span{
visibility: visible;
top: 0;
left: 0;
}
.bi span{
position: absolute;
visibility: hidden;
}
#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
.bi:hover span{padding-top: 2px;}
</style>
<body>
<ul id="nav">
<li><a class="bi" href=http://wuyisky.cnblogs.com>Home<span>首 页</span></a></li>
<li><a class="bi" href="http://wuyisky.cnblogs.com">CSS<span>样式表</span></a></li>
<li><a class="bi" href="http://wuyisky.cnblogs.com">样式表<span>CSS</span></a></li>
<li><a class="bi" href="http://wuyisky.cnblogs.com">首 页<span>Home</span></a></li>
</ul>
XHTML+CSS应用教程——利用CSS实现双语导航条
最新推荐文章于 2012-05-02 17:07:00 发布
<style type="text/css">ul,li{ margin:0; padding:0; float:left; display:block; list-style-type: none; }.bi{ position: relative; z-index: 0;}.bi:hover{z-index: 99;}.bi:hover span{ visibility: visible; top: 0; left: 0;}.bi span{ position: absolute; visibility: hidden;}#nav li a,.bi:hover span{ line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center;}#nav li a:hover,.bi:hover span{ color: #FFFFFF; background: #DC4E1B;}.bi:hover span{padding-top: 2px;}</style>
扫一扫
481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
