變換菜單展示及制作

2022-06-10 分類：網站建設

效果圖：

點擊菜單中英文切換

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

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

成都網站建設公司_創新互聯，為您提供網站導航、網站策劃、做網站、App開發、App設計、營銷型網站建設

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

猜你還喜歡下面的內容

兩列自適應布局 2022-06-10
「手把手教學」快速增加長尾關鍵詞庫數量 2022-06-10
網絡口碑營銷提升企業品牌，直接或者間接創造價值 2022-06-10
主動出擊讓你的網站快速被百度收錄 2022-06-10
名風seo淺談成為一個頂尖的seoer所需要的七大能力？ 2022-06-10
空白頁面應該如何設計 2022-06-10
設計師分享游戲化思維：如何實現“交易關系”到“情感聯系”的轉 2022-06-10
大型網站優化SEO架構模型與流量增長討論分析 2022-06-10
網站優化的實質性作用 2022-06-10