Jquery网站导航的普通下拉菜单

最新推荐文章于 2023-07-02 21:55:07 发布

伏特加的滋味

最新推荐文章于 2023-07-02 21:55:07 发布

阅读量449

点赞数

分类专栏： javaScript/jquery

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

版权

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>
       
	       <ul>
		      <li><a href="#" class="mainmenu" >Menu One</a></li>
			  <li class="submenu">
			   <a href="#">Link 1</a>
               <a href="#">Link 2</a>
			   <a href="#">Link 3</a>
			   <a href="#">Link 4</a>
			  </li>
		   </ul>
		   <ul>
		      <li><a href="#" class="mainmenu" >Menu Two</a></li>
			  <li class="submenu">
			   <a href="#">Link 1</a>
               <a href="#">Link 2</a>
			   <a href="#">Link 3</a>
			   <a href="#">Link 4</a>
			  </li>
		   </ul>	     
	 
	   <script type="text/JavaScript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	  <script>
	     $(function(){
			 $('.mainmenu').mouseenter(function(){
				
			 $('.submenu').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>
 </body>
</html>