jquery简单二级下拉菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery简单二级下拉菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery简单二级下拉菜单</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(function(){
	$('.dropdown').mouseenter(function(){
		$('.sublinks').stop(false, true).hide();
	
		var submenu = $(this).parent().next();

		submenu.css({
			position:'absolute',
			top: $(this).offset().top + $(this).height() + 'px',
			left: $(this).offset().left + 'px',
			zIndex:1000
		});
		
		submenu.stop().slideDown(300);
		
		submenu.mouseleave(function(){
			$(this).slideUp(300);
		});
	});
});
</script>
<style type="text/css">

/* CSS For Dropdown Menu Start */
ul
{
  list-style:none;
  padding:0px;
  margin:0px
}

ul li
{
  display:inline;
  float:left;
}

ul li a
{
  color:#ffffff;
  background:#990E00;
  margin-right:5px;
  font-weight:bold;
  font-size:12px;
  font-family:verdana;
  text-decoration:none;
  display:block;
  width:100px;
  height:25px;
  line-height:25px;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #560E00;
}

ul li a:hover
{
  color:#cccccc;
  background:#560E00;
  font-weight:bold;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #000000;
}

ul li.sublinks a
{
  color:#000000;
  background:#f6f6f6;
  border-bottom:1px solid #cccccc;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  margin-top:2px;
}

ul li.sublinks a:hover
{
  color:#000000;
  background:#FFEFC6;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
}

ul li.sublinks
{
	display:none;
}

/* CSS For Dropdown Menu End */



#container
{
  margin:0px auto;
  width:570px;
}

.clear
{
  clear:both;
}

.left
{
  float:left;
}

.right
{
  float:right;
}
</style>
</head>

<body>

  <div id="container" style="margin-top:40px;">
	
	<!-- First Menu Start -->
	<ul>
		<li><a href="#" class="dropdown">Menu One</a></li>
		
		<li class="sublinks">
			<a href="#">Link 1</a>
			<a href="#">Link 2</a>
			<a href="#">Link 3</a>
			<a href="#">Link 4</a>
			<a href="#">Link 5</a>
		</li>
		
	</ul>
	<!-- First Menu End -->

	<!-- Second Menu Start -->
	<ul>
		<li><a href="#" class="dropdown">Menu Two</a></li>
		
		<li class="sublinks">
			<a href="#">Link 1</a>
			<a href="#">Link 2</a>
			<a href="#">Link 3</a>
			<a href="#">Link 4</a>
			<a href="#">Link 5</a>
		</li>
		
	</ul>
	<!-- Second Menu End -->

	<!-- Third Menu Start -->
	<ul>
		<li><a href="#" class="dropdown">Menu Three</a></li>
		
		<li class="sublinks">
			<a href="#">Link 1</a>
			<a href="#">Link 2</a>
			<a href="#">Link 3</a>
			<a href="#">Link 4</a>
			<a href="#">Link 5</a>
		</li>
		
	</ul>
	<!-- Third Menu End -->

	<!-- Fourth Menu Start -->
	<ul>
		<li><a href="#" class="dropdown">Menu Four</a></li>
		
		<li class="sublinks">
			<a href="#">Link 1</a>
			<a href="#">Link 2</a>
			<a href="#">Link 3</a>
			<a href="#">Link 4</a>
			<a href="#">Link 5</a>
		</li>
		
	</ul>
	<!-- Fourth Menu End -->

	<!-- Fifth Menu Start -->
	<ul>
		<li><a href="#" class="dropdown">Menu Five</a></li>
		
		<li class="sublinks">
			<a href="#">Link 1</a>
			<a href="#">Link 2</a>
			<a href="#">Link 3</a>
			<a href="#">Link 4</a>
			<a href="#">Link 5</a>
		</li>
		
	</ul>
	<!-- Fifth Menu End -->
	
  
	<!-- Back to iShift link -->
	</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)