基于jQuery实现二级下拉菜单效果

2019-11-20 10:38:44

字体：大中小

来源：转载

供稿：网友

本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的，当然还有更为复杂的二级菜单，不过先学会如何制作简单的，分享给大家供大家参考，具体内容如下

代码如下：

<html><head><meta charset=" utf-8"><title>下拉菜单</title><style type="text/css">nav a{  text-decoration:none; } nav>ul>li{  float:left;  text-align:center;  padding:0 0.5em; width:120px; }nav li ul.sub-menu{  display:none;  padding-left:0 !important; } .sub-menu li{color:white;} .sub-menu li:hover{background-color:black;} .sub-menu li:hover a{color:white;} ul{list-style: none;} </style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){  $('.box> li').hover(function(){   $(this).find('.sub-menu').css('display', 'block');  },function(){   $(this).find('.sub-menu').css('display', 'none');  }); }); </script> </head><body><nav> <ul class="box">  <li><a href="#">前端专区</a>   <ul class="sub-menu">    <li><a href="#">jquery教程</a></li>    <li><a href="#">css教程</a></li>    <li><a href="#">js教程</a></li>   </ul>  </li>  <li><a href="#">资源专区</a>   <ul class="sub-menu">    <li><a href="#">电脑模板下载</a></li>    <li><a href="#">手机模板下载</a></li>    <li><a href="#">特效下载</a></li>   </ul>  </li>  <li><a href="#">交流专区</a>   <ul class="sub-menu">    <li><a href="#">运营交流</a></li>    <li><a href="#">seo优化</a></li>    <li><a href="#">站长交流</a></li>   </ul>  </li> </ul></nav></body></html>

希望本文所述对大家学习jquery程序设计有所帮助。

上一篇：基于JavaScript实现动态添加删除表格的行

下一篇：基于JavaScript判断浏览器到底是关闭还是刷新(超准确)