小米官网css3导航菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是小米官网css3导航菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html><!-- W3C规范 -->
<html lang="en"><!-- 声明 -->
<head>
<meta charset="UTF-8">
<!-- 声明当前页面的三要素 -->
<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>
<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>
		</a></li>
		<li><a href="#">小米平板</a></li>
		<li><a href="#">小米电视</a></li>
		<li><a href="#">盒子
		<div class="xs">
			<div class="xiao"></div>
			<img src="img/3.jpg" />
		</div>
		</a></li>
		<li><a href="#">路由器
		<div class="xs">
			<div class="xiao"></div>
			<img src="img/4.jpg" />
		</div>
		</a></li>
		<li><a href="#">合约机</a></li>
		<li><a href="#">服务</a></li>
		<li><a href="#">社区</a></li>
	</ul>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)