当前位置：首页 > 下载站 > js特效 > CSS3特效 > css3仿小米官网的导航下拉菜单代码

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

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

分类: js特效 / CSS3特效	发布时间: 2018-01-22	访问量: 2608
下载量: 63

点击下载预览效果

更多>

最新下载

jQuery自定义图片切换特效代码

jQuery自定义图片切换特效代码是一款jquery幻灯片，可自定义上下，左右，淡入淡出等模式。

0 2026-03-12

jQuery上下自动切换图片相册

一款jQuery实现的上下自动切换图片的相册代码。适用浏览器：IE8+、FireFox、Chrome、Safari、Opera。

0 2026-03-12

jQuery动态图片定时切换

jQuery动态图片定时切换是一款基于jquery实现的多张图片组合动态定时切换的特效代码。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-03-12

jQuery分屏显示图片跟描述

jQuery分屏显示图片跟描述是一款默认为图片自动切换样式，鼠标移到图片上会自动切换成双屏样式，左侧显示描述，右侧显示图片，效果很赞，站长素材推荐下载。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-03-12

jquery图片自动播放选项卡

jquery图片自动播放选项卡是一款基于jQuery powerSwitch插件实现的图片切换特效。

0 2026-03-12

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

18437 2025-08-28
CSS3 教程

1553846 2025-08-27
Rust 教程

25578 2025-08-27
Vue 教程

27231 2025-08-22
PostgreSQL 教程

23596 2025-08-21
Git 教程

10470 2025-08-21

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

<title>css3仿小米官网导航下拉菜单代码</title>

<style type="text/css">
*{margin: 0px;padding:0px;}
.nav {position: relative;width:994px;height:52px;background: #404144;margin: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{border:1px solid #cccccc;border-top:none;display: none;width:992px;background:#FFFFFF;position: absolute;top:50px;left:0px;}
.nav li a .xs .xiao {position:absolute;top:-8px;border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid #FFFFFF;width:0px;height:0px;z-index: 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;}
</style>
</head>

<body><script src="/demos/googlegg.js"></script>
<br>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">小米手机
<div class="xs">
<div class="xiao"></div>
<img src="img/1.jpg" />
</div>
</a></li>
<li><a href="#">红米
<div class="xs">
<div class="xiao"></div>
<img src="img/2.jpg" />
</div>