变换菜单展示及制作

标签：ima   font   tom   line   png   ack   hidden   bottom   适应   

效果图：

点击菜单   中英文切换

css样式：

.top-nav
{
font-size: 12px;
font-weight: bold;
list-style: none;
border-bottom: 8px solid #DC4E1B;
overflow: auto;

//去浮动，使下级的浮动自适应或 overflow：hidden；
}
.top-nav li
{
float: left;
margin-right: 1px;
}
.top-nav li a
{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}

/*设置正常状态英文菜单隐藏*/
.top-nav li a span{
display:none;
}

/*鼠标移动到链接上面时将英文菜单显示*/
.top-nav li a:hover span{
display:block;
}

/*鼠标移动到链接上面时将中文菜单位置上移*/
.top-nav li a:hover{
margin-top:-20px;
}

变换菜单展示及制作

标签：ima   font   tom   line   png   ack   hidden   bottom   适应   

原文地址：http://www.cnblogs.com/yigexiaojiangshi/p/6182854.html