jquery下拉级联菜单

最新推荐文章于 2017-12-10 21:39:51 发布

伏特加的滋味

最新推荐文章于 2017-12-10 21:39:51 发布

阅读量683

点赞数

分类专栏： javaScript/jquery

本文链接：https://blog.csdn.net/yuanyuan214365/article/details/53325618

版权

javaScript/jquery 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>下拉级联菜单链表</title>
 </head>
 <body>
      <div id="menudiv">
	  <ul id="mainmenu"> <!-- 最上层单元-->
	      <li><a href="#" > 1 HTML</li>
	      <li><a href="#" > 2 CSS </li>
		  <li><a href="#" > 3 JavaScript </li>
            <ul>
			  <li><a href="#">3.1 jQuery</a>
			    <ul>
			      <li><a href="#">3.1.1 Download</a></li>
				  <li><a href="#">3.1.2 Tutorial
                </ul>
			  </li>
			  <li> <a href="#">3.2 Mootools</a></li>
			  <li> <a href="#">3.3 Pototype</a></li>
			</ul>
		   </li>
		</ul> 
	  </div>

      <script>
	     $(document).ready(function(){
		     $("# mainmanu ul").css({display:"none"});
			 $("# mainmanu li").hover(function(){
			    $(this).find('ul:first').css({visibility:"visible"}).show(400);},
				function(){
				   $(this).find('ul:first').css({visibility:"hidden"});
				});
		 });
	  </script>
 </body>
</html>