HTML小案例--导航条实现，鼠标滑过中英文切换/放大模块

小案例一

当鼠标滑过每一个小tab，该模块凸起，下边框消失

起始状态

实现状态

 

代码实现

//CSS：
.nav2{
    width:1000px;
    height:36px;
    border-bottom:1px solid #666;
    margin:50px auto;
}
.nav2 li{
    height:35px;
    float:left; 
    background:#f7f7f7; 
    border:1px solid #cecece; 
    border-bottom:none; 
    margin-left:10px; 
    line-height:34px;
}
.nav2 li a{padding:0 14px;}
.nav2 li:hover{
    height:40px; 
    border-color:#666; 
    background-color:#fff; 
    margin-top:-4px;
}

<!--HTML-->
<ul class="nav2">
	<li><a href="#">tab one</a></li>
    <li><a href="#">tab two</a></li>
    <li><a href="#">tab three</a></li>
    <li><a href="#">tab four</a></li>
</ul>

 小案例二

鼠标滑过小的导航模块，英文切换为中文显示

起始状态

实现状态

 

代码实现 

//CSS
*{margin:0; padding:0;}
li{list-style:none;}
body{font:12px "微软雅黑";}
a{text-decoration:none; color:#333;}
em{font-style:normal;}
.nav1{width:1000px; height:20px; border-bottom:8px solid #f60; margin:0 auto;}
.nav1 li{width:80px; line-height:20px; background:#eee; text-align:center; float:left; margin-left:1px;}
.nav1 li a{display:block;}
.nav1 span{display:none;}
.nav1 a:hover span{display:inline;}
.nav1 li:hover em{display:none;}
.nav1 a:hover{background:#f60; color:#fff;}

!--html-->
<ul class="nav2">
	<li><a href="#">tab one</a></li>
    <li><a href="#">tab two</a></li>
    <li><a href="#">tab three</a></li>
    <li><a href="#">tab four</a></li>
</ul>