css部分
<style type="text/css">
#drop_down_list{
list-style:none;
}
#drop_down_list li{
float:left;
width:120px;
}
#drop_down_list li a{
display:block;
background: #324143;
color: #EAFFED;
border-right: 2px white solid;
text-decoration: none;
}
#drop_down_list li a:hover{
background: #24313C;
}
#drop_down_list li ul{
visibility: hidden;
float:left;
padding-left:0px;
width:120px;
list-style:none;
}
#drop_down_list li ul li a{
background: #A9C251;
}
#drop_down_list li ul li a:hover{
background: #8EA344;
}
</style>
jquery 部分
<script type="text/javascript">
var drop_down_ul = 0;
var timeout = 1000;
var close_timer = 0;
function cancel_timeout(){
if(close_timer){
window.clearTimeout(close_timer);
close_timer = null;
}
}
function limsover(){
cancel_timeout();
drop_down_close();
drop_down_ul = $(this).find("ul").eq(0).css("visibility", "visible");
}
function drop_down_close(){
if(drop_down_ul){
drop_down_ul.css("visibility", "hidden");
}
}
function drop_down_timer(){
close_timer = window.setTimeout(drop_down_close, timeout);
}
$(document).ready(function(){
$("#drop_down_list > li").bind("mouseover", limsover);
$("#drop_down_list > li").bind("mouseleave", drop_down_timer);
});
</script>
html部分
<ul id="drop_down_list">
<li>
<a href="#">Search Engine</a>
<ul>
<li><a href="http://www.baidu.com/">baidu</a></li>
<li><a href="http://www.google.com/">google</a></li>
</ul>
</li>
<li>
<a href="#">social network</a>
<ul>
<li><a href="http://renren.com/">renren</a></li>
<li><a href="http://pengyou.com/">pengyou</a></li>
</ul>
</li>
</ul>
分享到:
相关推荐
收藏的很多下拉菜单的集合包,二级下拉菜单、三级下拉菜单等。
jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表
VBA设置多级下拉菜单.xlsm VBA设置动态多级下拉菜单.xlsm
wincc 下拉菜单,代码实现下拉菜单的制作
jQuery多级下拉菜单支持多级下拉列表菜单,适用于商城网站或者企业网站,php中文网推荐下载!
自定义下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
JS 无限下拉菜单 JS 无限下拉菜单 JS 无限下拉菜单 js下拉菜单 无限下拉菜单 JS 无限下拉菜单
记得之前我们给大家分享过一些飘带式的菜单,比如CSS3 飘带菜单 超酷3D CSS3菜单和CSS3飘带状多级下拉菜单;也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉...
Access数据库-二级下拉菜单制作
用Dreamweaver制作下拉菜单,手把手教你马上学会如何制作下拉菜单
EXCEL如何设置多级下拉菜单
Visual C++源代码 5 如何在工具栏添加下拉菜单Visual C++源代码 5 如何在工具栏添加下拉菜单Visual C++源代码 5 如何在工具栏添加下拉菜单Visual C++源代码 5 如何在工具栏添加下拉菜单Visual C++源代码 5 如何在...
主栏目+二级栏目+分类组合下拉菜单扩展插件是将后台所设置的主菜单和二级菜单(或大分类),以下拉式二级菜单的形式实现.其中主栏目为单页.会员,表单型的,下拉为二级栏目菜单;主栏目为文章,图文,下载型的,以栏目下属大...
最新项目需求要求做一个三级下拉菜单列表(树形下拉菜单)。但UGUI并没有原生的插件,只能自己实现。思路每个级的ItemPanel(一个单级菜单条)样式是一样的,于是需要一个panel来装所有的itemPanel,在整个菜单 顶部...
jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单 jquery导航条滑动下拉菜单_滑动显示二级下拉菜单
网页下拉菜单3种实现,html+css实现,js实现,JQuery实现。
信捷触摸屏编程教程,初学者学习信捷触摸屏教程,信捷触摸屏下拉菜单实例程序。能让你很容易懂得下拉菜单的使用方法。
ActionBar中的下拉菜单操作
我们以前分享过很多各种各样的jQuery和CSS3下拉菜单,有支持右键菜单的下拉菜单,比如jQuery自定义下拉框选择菜单 支持右键弹出菜单,也有支持多级的下拉菜单,比如jQuery左侧带小图标的多级下拉菜单。今天我们要...