html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果

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

代码如下：

下拉菜单

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;}

$(document).ready(function(){

$('.box> li').hover(function(){

$(this).find('.sub-menu').css('display', 'block');

},function(){

$(this).find('.sub-menu').css('display', 'none');

});

前端专区
- jquery教程
- css教程
- js教程
资源专区
- 电脑模板下载
- 手机模板下载
- 特效下载
交流专区
- 运营交流
- seo优化
- 站长交流

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

html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果相关推荐

【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...
html手机页面下拉加载更多,jQuery手机端上拉刷新下拉加载更多页面
基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 实现的代码. html代码: row 10 row 9 row 8 row 7 row ...
element做树形下拉_一个基于 elementUi 的树形下拉框组件vue
wl-vue-select,wl-tree-select 简介用于vue框架的树形下拉框及带全选的普通下拉框. Tree drop-down box for vue framework and or ...
HTML实现二级联动下拉菜单,基于jquery的二级联动菜单实现代码
jQuery 1.3.2 简单实现select二级联动 jQuery 二级联动 $(document).ready(function(){ $("#province").chang ...
基于jquery实现自定义下拉菜单（前端开发）
1.css代码 *,p,h1,h2,h3,h4,h5,h6{padding: 0;margin: 0;border: none;} h1,h2,h3,h4,h5,h6{font-size: 24px; ...
java json html模板,基于jQuery的AJAX和JSON实现纯html数据模板（转载）
来自:http://www.cnblogs.com/linzheng/archive/2010/10/14/1851799.html 通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的 ...
php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
php中手机端ajax上拉加载更多,jQuery手机网页上拉加载更多
手机网页和PC网页都可以使用的上拉加载更多内容,其中LoadingDataFn自己改为ajax加载就可以了var page = 1, //分页码 off_on = false, //分页开关(滚动加载 ...

html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果

html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果相关推荐

最新文章

热门文章