今天，分享一个纯css与html制作的简单的双语菜单特效导航样式.
css代码如下：
<style type="text/css">
a{
color:hsla(220,100%,91%,1.00);
text-decoration: none;
}
a:hover{
color:hsla(0,0%,94%,1.00);
text-decoration: underline;
}
.menu{
font-size: 12px;
font-weight: bold;
list-style: none;
}
.menu li{
float: left;
}
.nav-i{
position: relative;
z-index: 0;
}
.nav-i:hover{
z-index: 99999;
}
.nav-i span{
position: absolute;
visibility: hidden;
}
.nav-i:hover span{
top: 0;
left: 0;
visibility: visible;
cursor: pointer;
}
.menu li a,.nav-i:hover span{
width: 90px;
line-height: 35px;
text-decoration: none;
text-align: center;
background:hsla(0,0%,95%,1.00);
color: #666666;
display: block;
}
.menu li a:hover,.nav-i:hover span{
color: #FFFFFF;
background:hsla(202,100%,27%,1.00);
}
</style>
html有两段代码，分别显示不同的切换效果，可自由选择.
鼠标移动到菜单上显示切换为英文内容:
<div id="head">
<ul class="menu">
<li><a class="nav-i" href="#">Home<span>首页</span></a></li>
<li><a class="nav-i" href="#">Product<span>产品</span></a></li>
<li><a class="nav-i" href="#">About us<span>关于我们</span></a></li>
<li><a class="nav-i" href="#">Contact<span>联系方式</span></a></li>
</ul>
</div>
或者鼠标指针停留在英文菜单上显示中文内容：
<div id="head2">
<ul class="menu">
<li><a class="nav-i" href="#">首页<span>Home</span></a></li>
<li><a class="nav-i" href="#">产品<span>Product</span></a></li>
<li><a class="nav-i" href="#">关于我们<span>About us</span></a></li>
<li><a class="nav-i" href="#">联系方式<span>Contact</span></a></li>
</ul>
</div>
以上就是使用纯css代码与html代码一起实现简单的可中英文切换的栏目菜单.
tool在线工具