<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="menu.css" media="all">
</head>
<body>
<div class="bg"><img src="imgs/home-default17.jpg" width="100%" height="100%"></div>
<div class="nav4">
<nav>
<div id="nav4_ul" class="nav_4">
<ul class="box">
<li>
<a href="javascript:;" class=""><span>關於我們</span></a>
<dl>
<dd><a href="#"><span>電話</span></a></dd>
<dd><a href="#"><span>地址</span></a></dd>
<dd><a href="#"><span>在線客服</span></a></dd>
<dd><a href="#"><span>在線QQ</span></a></dd>
</dl>
</li>
<li>
<a href="javascript:;" class=""><span>電商</span></a>
<dl>
<dd><a href="#"><span>微信會員卡</span></a></dd>
<dd><a href="#"><span>微社區</span></a></dd>
<dd><a href="#"><span>微投票</span></a></dd>
<dd><a href="#"><span>微調研</span></a></dd>
</dl>
</li>
<li>
<a href="javascript:;" class="on"><span>會員專區</span></a>
<dl>
<dd><a href="#"><span>微商城</span></a></dd>
<dd><a href="#"><span>微餐飲</span></a></dd>
<dd><a href="#"><span>微團購</span></a></dd>
<dd><a href="#"><span>微汽車</span></a></dd>
</dl>
</li>
</ul>
</div>
</nav>
<div id="nav4_masklayer" class="masklayer_div on"> </div>
</div>
<script src="nav4.js"></script>
<script type="text/javascript">
nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll("li>a"), document.getElementById("nav4_masklayer"));
</script>
</body>
</html>
使用HTML5 和css 3 編寫的 很不錯 來自於 這裏