变换菜单展示及制作

效果图：

点击菜单   中英文切换

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;
}

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有