css3仿小米官網的導覽下拉選單代碼

<樣式類型=“text/css”>
*{邊距：0px;填滿：0px;}
.nav {位置：相對；寬度：994px；高度：52px；背景：#404144；邊距：0 auto；}
.nav li{list-style: none;float: left;line-height: 50px;}
.nav li a{display: block;text-decoration: none;color: #FFFFFF;padding: 0px 15px;font-family: "微軟雅黑";}
.nav li a:hover .xs{display: block;}
.nav li a:hover {background: #333333;}
.nav li a .xs{邊框：1px實心#cccccc；邊框頂部：無；顯示：無；寬度：992px；背景：#FFFFFF；位置：絕對；頂部：50px；左側：0px；}
.nav li a .xs .xiao {位置：絕對；上：-8px；左邊框：8px純色透明；右邊框：8px純色透明；下邊框：8px純色#FFFFFF；寬度：0px；高度：0px ;z 索引: 999;}
.nav li:nth-child(1) .xiao {left:20px;}
.nav li:nth-child(2) .xiao {left:98px;}
.nav li:nth-child(3) .xiao {left:177px;}
.nav li:nth-child(4) .xiao {left:255px;}
.nav li:nth-child(5) .xiao {left:348px;}
.nav li:nth-child(6) .xiao {left:427px;}
.nav li:nth-child(7) .xiao {left:496px;}
.nav li:nth-child(8) .xiao {left:576px;}
.nav li:nth-child(9) .xiao {left:646px;}
.nav li:nth-child(10) .xiao {left:706px;}
</風格>
</頭>


<br>

相關文章

CSS3 `transition: all` 是否比針對特定屬性的效率低？

07 Dec 2024

CSS3 轉場：「transition: all」比針對特定屬性的效率低嗎？

如何在沒有硬編碼值的情況下建立響應式 CSS3 選取框效果？

06 Dec 2024

CSS3 中的選取框效果：避免文字適應的特定值在 CSS3 動畫中，通常需要建立選取框效果，其中文字...

CSS 轉換：「transition: all」還是「transition: x」比較快？

03 Dec 2024

CSS3 過渡：「transition: all」與「transition: x」的效能影響關於 CSS3 過渡的效能效率，常見的...

為什麼我的 CSS3 動畫在 Safari 中不起作用？

14 Dec 2024

Safari 中 CSS3 動畫失效您遇到了 CSS3 動畫在 Safari 中無效的問題。儘管該動畫在支援 CSS3...

如何建立具有自適應文字長度的動態 CSS 選取框？

07 Dec 2024

如何建立具有自適應文字長度的動態選取框效果在 CSS3 中，實現選取框效果需要動畫，但使用特定的...

如何僅使用 CSS3 變換建立懸停圖片縮放效果？

28 Nov 2024

使用 CSS3 Transform 對懸停的 CSS 圖像縮放效果使用 CSS3 的...

如何在 CSS3 中實現淡出效果：關鍵影格動畫與轉場？

27 Oct 2024

CSS3 轉場 - 淡出效果在 CSS3 中，可以透過使用關鍵影格動畫來實現淡出效果。然而，這是...

如何在 CSS3 中選擇類別名稱以特定字串開頭的元素？

13 Nov 2024

使用 CSS3 將元素與以特定字串開頭的類別名稱匹配是否可以基於...有效地選擇多個元素

為什麼我使用 CSS3 @keyframes 的上滑動畫不起作用？

28 Oct 2024

CSS3 轉場 - 淡出效果使用 CSS3，您可以輕鬆實現淡出效果以增強使用者體驗。然而，如果你遇到...

See all articles