利用CSS3实现制作红色下拉导航菜单代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

102 407 136



特效描述:利用CSS3实现 制作红色 下拉导航 菜单代码。利用CSS3实现制作红色下拉导航菜单代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/nav_menu3.css" type="text/css" media="all" />

2. HTML代码

<div class="nav_menu3">
	<ul>
		<li class='nav-has-sub'><a href='index.html'>庄严禅院</a>
			<ul>
				<li><a href='#'>缘起</a></li>
				<li><a href='#'>寺院建设过程</a></li>
				<li><a href='#'>远景</a></li>
				<li><a href='#'>功德榜芳名</a></li>
				<li><a href='#'>出入账明细表</a></li>
			</ul>
		</li>
		<li class='nav-has-sub'><a href='#'>智觉流通</a>
		  <ul>
			<li><a href='#'>各类经书</a></li>
			<li><a href='#'>戒律</a></li>
			<li><a href='#'>藏</a></li>
			 <li class='nav-has-sub'><a href='#'>论</a>
				<ul>
				   <li><a href='#'>问答</a></li>
				   <li><a href='#'>解惑</a></li>
				</ul>
			 </li>
		  </ul>
	   </li>
	   <li class='nav-has-sub'><a href='#'>中国传统文化</a>
			<ul>
				<li><a href='#'>中医</a></li>
				<li><a href='#'>礼仪</a></li>
				<li><a href='#'>黄帝内经</a></li>
				<li><a href='#'>咨询</a></li>
				<li><a href='#'>免费养老</a></li>
			</ul>
		</li>
	   <li class='nav-has-sub'><a href='#'>世界历学</a>
			<ul>
				<li><a href='#'>世界各地文化</a></li>
			</ul>
		</li>
	   <li class='nav-has-sub'><a href='#'>人类交流</a>
			<ul>
				<li><a href='#'>企业管理</a></li>
				<li><a href='#'>商业模式咨询</a></li>
				<li><a href='#'>科技咨询</a></li>
			</ul>
		</li>
		<li class='nav-has-sub'><a href='#'>游戏人间</a>
		  <ul>
			<li><a href='#'>佛教电影/电视</a></li>
			 <li class='nav-has-sub'><a href='#'>游戏</a>
				<ul>
				   <li><a href='#'>共建极乐</a></li>
				   <li><a href='#'>各种游戏</a></li>
				   <li><a href='#'>猜迷语/猜字</a></li>
				</ul>
			 </li>
		  </ul>
	   </li>
	   <li class='nav-has-sub'><a href='#'>人间杂会</a>
			<ul>
				<li><a href='#'>八卦</a></li>
				<li><a href='#'>新闻</a></li>
				<li><a href='#'>社会</a></li>
				<li><a href='#'>易经</a></li>
				<li><a href='#'>小说/故事</a></li>
			</ul>
		</li>
	   <li class='nav-has-sub'><a href='#'>智力学习</a>
			<ul>
				<li><a href='#'>小学</a></li>
				<li><a href='#'>初中</a></li>
				<li><a href='#'>高中</a></li>
			</ul>
		</li>
	</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片收缩展开 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 导航菜单导航条

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到