<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 3D立体凸出显示导航菜单插件</title>
<link rel="stylesheet" href="css/reset.min.css">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow'>
<link rel="stylesheet" href="css/style.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<nav id="main-nav">
<div id="box">
<div class="face front">
<div class="item-con">
<div class="item">
<div class="i-face i-front">About<br>us<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Menu<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Wine<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Reserve<br>a table<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Private<br>dining<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Gallery<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
<div class="item-con">
<div class="item">
<div class="i-face i-front">Contact<br>us<div class="arrow-hover"></div></div>
<div class="i-face i-right"></div>
<div class="i-face i-left"></div>
<div class="i-face i-top"></div>
<div class="i-face i-bottom"></div>
</div>
</div>
</div>
<div class="face back"></div>
<div class="face right"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</nav>
<script src='js/jquery.min.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src='js/video.js'></script>
<script src='js/bigvideo_3.js'></script>
<script src="js/index.js"></script>
</body>
</html>