css3仿小米官网的导航下拉菜单代码

<样式类型=“text/css”>
*{边距：0px;填充：0px;}
.nav {位置：相对；宽度：994px；高度：52px；背景：#404144；边距：0自动；}
.nav li{列表样式：无；浮动：左；行高：50px；}
.nav li a{display: block;text-decoration: none;color: #FFFFFF;padding: 0px 15px;font-family: "微软雅黑";}
.nav li a:hover .xs{显示: 块;}
.nav li a:hover {背景:#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 {左:496px;}
.nav li:nth-child(8) .xiao {left:576px;}
.nav li:nth-child(9) .xiao {left:646px;}
.nav li:nth-child(10) .xiao {左:706px;}
</风格>
</头>


<br>

相关文章

CSS3 `transition: all` 是否比针对特定属性的效率低？

07 Dec 2024

CSS3 过渡：“transition: all”比针对特定属性的效率低吗？使用 CSS3 过渡时，...

如何在没有硬编码值的情况下创建响应式 CSS3 选取框效果？

06 Dec 2024

CSS3 中的选取框效果：避免文本适应的特定值在 CSS3 动画中，通常需要创建选取框效果，其中文本...

为什么我的 CSS3 动画在 Safari 中不起作用？

14 Dec 2024

Safari 中 CSS3 动画失效您遇到了 CSS3 动画在 Safari 中无效的问题。尽管该动画在支持 CSS3...

如何创建具有自适应文本长度的动态 CSS 选取框？

07 Dec 2024

如何创建具有自适应文本长度的动态选取框效果在 CSS3 中，实现选取框效果需要动画，但使用特定的...

深入了解Bootstrap中的进度条组件

23 Feb 2021

在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本

如何仅使用 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