效果圖：

點擊菜單   中英文切換

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;
}
/*設置正常狀態(tài)英文菜單隱藏*/
.top-nav li a span{
display:none;
}
/*鼠標移動到鏈接上面時將英文菜單顯示*/
.top-nav li a:hover span{
display:block;
}
/*鼠標移動到鏈接上面時將中文菜單位置上移*/
.top-nav li a:hover{
margin-top:-20px;
}

名稱欄目：變換菜單展示及制作
文章位置：http://m.rwnh.cn/news13/165813.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、網(wǎng)站策劃、做網(wǎng)站、App開發(fā)、App設計、營銷型網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)