<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>jQuery全屏大幅下拉菜单导航代码 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/default.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/component.css" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="${pageContext.request.contextPath }/js/jquery-3.4.1.min.js"></script>
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"  rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>	
<script src="${pageContext.request.contextPath }/js/cbpHorizontalMenu.min.js"></script>	
</head>
<body>

<div class="container">
	<div class="main">
		<nav id="cbp-hrmenu" class="cbp-hrmenu">
			<ul>
				<li>
					<a href="#">Products</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner"> 
							<div>
								<h4>Learning &amp; Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
									<li><a href="#">Fallen Angel</a></li>
									<li><a href="#">Sui Maker</a></li>
									<li><a href="#">Wave Master</a></li>
									<li><a href="#">Golf Pro</a></li>
								</ul>
							</div>
							<div>
								<h4>Utilities</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
							</div>
							<div>
								<h4>Education</h4>
								<ul>
									<li><a href="#">Learn Thai</a></li>
									<li><a href="#">Math Genius</a></li>
									<li><a href="#">Chemokid</a></li>
								</ul>
								<h4>Professionals</h4>
								<ul>
									<li><a href="#">Success 1.0</a></li>
									<li><a href="#">Moneymaker</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
				<li>
					<a href="#">Downloads</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner">
							<div>
								<h4>Education &amp; Learning</h4>
								<ul>
									<li><a href="#">Learn Thai</a></li>
									<li><a href="#">Math Genius</a></li>
									<li><a href="#">Chemokid</a></li>
								</ul>
								<h4>Professionals</h4>
								<ul>
									<li><a href="#">Success 1.0</a></li>
									<li><a href="#">Moneymaker</a></li>
								</ul>
							</div>
							<div>
								<h4>Entertainment</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Holy Cannoli</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
							</div>
							<div>
								<h4>Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
									<li><a href="#">Fallen Angel</a></li>
									<li><a href="#">Sui Maker</a></li>
									<li><a href="#">Wave Master</a></li>
									<li><a href="#">Golf Pro</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
				<li>
					<a href="#">Applications</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner"> 
							<div>
								<h4>Learning &amp; Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
								</ul>
								<h4>Utilities</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
							</div>
							<div>
								<h4>Education</h4>
								<ul>
									<li><a href="#">Learn Thai</a></li>
									<li><a href="#">Math Genius</a></li>
									<li><a href="#">Chemokid</a></li>
								</ul>
								<h4>Professionals</h4>
								<ul>
									<li><a href="#">Success 1.0</a></li>
									<li><a href="#">Moneymaker</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
				<li>
					<a href="#">Projects</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner"> 
							<div>
								<h4>Learning &amp; Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
									<li><a href="#">Fallen Angel</a></li>
									<li><a href="#">Sui Maker</a></li>
									<li><a href="#">Wave Master</a></li>
									<li><a href="#">Golf Pro</a></li>
								</ul>
								<h4>Utilities</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
								</ul>
							</div>
							<div>
								<h4>Entertainment</h4>
								<ul>
									<li><a href="#">Gadget Finder</a></li>
									<li><a href="#">Green Tree Express</a></li>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Holy Cannoli</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
				<li>
					<a href="#">Freeware</a>
					<div class="cbp-hrsub">
						<div class="cbp-hrsub-inner"> 
							<div>
								<h4>Utilities</h4>
								<ul>
									<li><a href="#">Green Tree Pro</a></li>
									<li><a href="#">Wobbler 3.0</a></li>
									<li><a href="#">Coolkid</a></li>
								</ul>
								<h4>Education</h4>
								<ul>
									<li><a href="#">Learn Thai</a></li>
									<li><a href="#">Math Genius</a></li>
									<li><a href="#">Chemokid</a></li>
								</ul>
							</div>
							<div>
								<h4>Professionals</h4>
								<ul>
									<li><a href="#">Success 1.0</a></li>
									<li><a href="#">Moneymaker</a></li>
								</ul>
							</div>
							<div>
								<h4>Learning &amp; Games</h4>
								<ul>
									<li><a href="#">Catch the Bullet</a></li>
									<li><a href="#">Snoopydoo</a></li>
									<li><a href="#">Fallen Angel</a></li>
									<li><a href="#">Sui Maker</a></li>
									<li><a href="#">Wave Master</a></li>
									<li><a href="#">Golf Pro</a></li>
								</ul>
							</div>
						</div><!-- /cbp-hrsub-inner -->
					</div><!-- /cbp-hrsub -->
				</li>
			</ul>
		</nav>
	</div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cbpHorizontalMenu.min.js"></script>
<script type="text/javascript">
$(function() {
	cbpHorizontalMenu.init();
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>