仿保时捷官网多级下拉菜单效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<div class="miaov_page">
	<div class="miaov_shade"></div>
	<div class="miaov_shadeSecond"></div>
	<div class="miaov_nav" id="miaov_nav">
		<ul class="miaov_navTop" id="miaov_navTop">
			<li>
				<h2 class="index"></h2>
				<ul class="miaov_navTopSecond">
					<li>
					<li>
					<li>
				</ul>
			</li>
			<li>
				<h2></h2>
				<ul class="miaov_navTopSecond">
					<li>
					<li>
					<li>
					<li>
					<li>
				</ul>
			</li>
		</ul>
		<ul class="miaov_navBottom">
			<li>
				<h2></h2>
				<ul>
					<li>
					<li>
				</ul>
			</li>
			<li>
				<h2></h2>
				<ul>
					<li>
					<li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="miaov_boxShade" id="miaov_boxShade"></div>
	<div class="miaov_boxShadeSecond" id="miaov_boxShadeSecond"></div>
	<ul class="miaov_box" id="miaov_box">
		<li class="show">
			<h3>妙味课堂――作品</h3>
			<a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" alt="妙味课堂"></a>
			<p>般固（Banggoo）网站，从网站策划、设计、制作、后台整个过程全执行，网站虽小，修改时间旷日持久，历时二个月完成....</p>
		</li>
		<li>
			<h3>妙味课堂――关于我们</h3>
			<a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" alt="妙味课堂"></a>
			<p>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！</p>
		</li>
		<li>
			<h3>妙味课堂――在线留言</h3>
			<a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" alt="妙味课堂"></a>
			<p>请给我们留言吧</p>
		</li>
		<li>
			<h3>妙味茶馆――视频教程</h3>
			<a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" alt="妙味课堂"></a>
			<p>妙味原创JavaScript视频教程，展现各种超炫特效的实现过程</p>
		</li>
		<li>
			<h3>妙味茶馆――生活秀</h3>
			<a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" alt="妙味课堂"></a>
			<p>展示学员生活照、上课照，个人秀、合影、活动贴、怪表情、整蛊秀。。。</p>
		</li>
		<li>
			<h3>妙味茶馆――特效兜</h3>
			<a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" alt="妙味课堂"></a>
			<p>各类JavaScript效果发布、鉴赏、分享、下载，只要觉得好都可以拿来晒晒</p>
		</li>
		<li>
			<h3>
<a href="https://www.111cn.net">手机主题</a>妙味茶馆――技术交流</h3>
			<a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" alt="妙味课堂"></a>
			<p>提出你的问题，分享你的经验，让学习变得轻松有趣</p>
		</li>
		<li>
			<h3>妙味茶馆――聊吧</h3>
			<a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"></a><a href="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" class="js-smartPhoto-pc" target="_blank"><img src="https://img.111cn.net/uploads/20220923/img_632d5877e0fdc30.jpg" alt="妙味课堂"></a>
			<p>爱咋扯就咋扯，天南地北由得你说</p>
		</li>
	</ul>
</div>

提示：您可以先修改部分代码再运行

仿保时捷官网多级下拉菜单效果

相关文章

精彩推荐