js导航菜单鼠标滑过展开二级下拉特效代码下载


js导航菜单鼠标滑过展开二级下拉特效代码下载
js导航菜单鼠标滑过展开二级下拉特效代码下载以及导航菜单、鼠标滑过展开、二级下拉等js/jquery网页特效代码下载。

1. 引入JS

<script type='text/javascript' src='js/dropdown.js'></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;background-color:#fff;}
/*导航菜单*/
#nav{width:950px;margin:20px auto;height:40px;line-height:40px;background:url('images/nav-bg.png');display:block;overflow:hidden;}
#navMenu ul{width:950px;float:left;height:40px;}
#navMenu li{float:left;font-size:14px;}
#navMenu li a{color:#fff!important;text-decoration:none;width:91px;height:40px;line-height:40px;text-align:center;background-image:url('images/navbg.png');display:block;}
#navMenu li a.last{width:92px;}
#navMenu li a.current{background-position:0 -80px;width:91px;height:40px;line-height:40px;text-align:center;display:block;color:#fff;}
#navMenu li a:hover{background-position:0 -40px;}
/*-------- 下拉菜单 --------------*/
.dropMenu{position:absolute;top:0;z-index:100;visibility:hidden;margin-top:-2px;border:1px solid #0e2c5e;border-top:0;background-color:#cbdef4;padding:4px;width:260px;}
.dropMenu li{float:left;width:130px;height:32px;}
.dropMenu li a{display:block;padding:5px 0 5px 12px;color:#0f335d;}
.dropMenu a:hover{text-decoration:underline;color:#000;}
</style>
	<div id="nav">
		<ul id="navMenu">
			<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
			<li><a href="http://www.51qianduan.com/" rel='dropmenu1'>jquery 特效</a></li>
			<li><a href="http://www.51qianduan.com/" rel='dropmenu2'>js特效</a></li>
			<li><a class="current" href="http://www.51qianduan.com/" rel='dropmenu3'>flash特效</a></li>
			<li><a href="http://www.51qianduan.com/" rel='dropmenu4'>div+css教程</a></li>
			<li><a class="last" href="http://www.51qianduan.com/" rel='dropmenu5'>html5教程</a></li>
		</ul>
	</div>
	<ul id="dropmenu1" class="dropMenu">
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul>
	<ul id="dropmenu2" class="dropMenu">
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul>
	<ul id="dropmenu3" class="dropMenu">
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul>
	<ul id="dropmenu4" class="dropMenu">
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul>
	<ul id="dropmenu5" class="dropMenu">
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul>
	<script type="text/javascript">cssdropdown.startchrome("navMenu")</script> 

相关推荐

发表评论

相关文章