變換菜單展示及製作，變換菜單展示製作

變換菜單展示及製作，變換菜單展示製作

：

點擊菜單   中英文切換

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