`

jQuery之下拉菜单

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(function(){
	
	$("li:has(ul)").hover(function(){
		$(this).children().show();
	},function(){
		$(this).children().hide();
	});
	
});
</script>
</head>
<style media="screen" type="text/css">
html, body, div, span,iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
    list-style:none;
}

html {
	overflow-y:scroll;
	border:0; 
	background:#b2af9e;
} 
body {
	text-align:center;
	width:1000px;
    font: 12px/18px Tahoma, Helvetica, Arial, sans-serif;
	margin:auto;
	background:#fff;
}
a {text-decoration: none;text-decoration:none}
a:hover {text-decoration:none}
div{
width:100%;
height:20px;
background-color:#e5edf6;
}
ul li {
float:left;
width:60px;
height:20px;
background-color:#0280C6;
margin:0px;
display:inline; 
color:#B6E4FD;
}
ul li:hover{
background-color:#B6E4FD;
color:#0280C6;
}
ul li ul{
display:none;
}
ul li ul li{
width:60px;
height:20px;
background-color:#B6E4FD;
margin:0px;
color:#0280C6;
}
ul li ul li:hover{
background-color:#0280C6;
color:#B6E4FD;
}
ul li ul li a {
text-decoration: none;
color:#0280C6;
text-decoration:none;
}
ul li ul li a:hover {
color: #B6E4FD;
text-decoration:none;
}

</style>
<body>
<ul>
	<li>aaa
		<ul>
			<li><a href="#">aaa1</a></li>
			<li><a href="#">aaa2</a></li>
			<li><a href="#">aaa3</a></li>
			<li><a href="#">aaa4</a></li>
		</ul>
	</li>
	<li>bbb
		<ul>
			<li><a href="#">bbb1</a></li>
			<li><a href="#">bbb2</a></li>
			<li><a href="#">bbb3</a></li>
			<li><a href="#">bbb4</a></li>
		</ul>
	</li>
	<li>ccc
		<ul>
			<li><a href="#">ccc1</a></li>
			<li><a href="#">ccc2</a></li>
			<li><a href="#">ccc3</a></li>
			<li><a href="#">ccc4</a></li>
		</ul>
	</li>
	<li>ddd
		<ul>
			<li><a href="#">ddd1</a></li>
			<li><a href="#">ddd2</a></li>
			<li><a href="#">ddd3</a></li>
			<li><a href="#">ddd4</a></li>
		</ul>
	</li>
	<li>eee
		<ul>
			<li><a href="#">eee1</a></li>
			<li><a href="#">eee2</a></li>
			<li><a href="#">eee3</a></li>
			<li><a href="#">eee4</a></li>
			<li><a href="#">eee5</a></li>
		</ul>
	</li>
</ul>

</body>
</html>
分享到:
评论

相关推荐

    jquery 上下滑动菜单

    jquery上下滑动菜单,兼容ie6+,ff 2.0+,不好之处还请见谅.

    基于jquery的改进型(右键)列表菜单

    花生米AJAX-UI系列之:基于JQUERY的浮动层(右键)列表菜单0.2改进版 改版本是“使用JQUERY 自创的自定义右键菜单插件 ”的重大改进,原始版本不再使用! 可以对表格,列表,或者单个DOM容器进行右键绑定 菜单项的...

    jquery右侧导航菜单悬浮代码,带返回顶部功能

    jquery右侧导航菜单悬浮代码,向下拉动看返回顶部特效,此代码只供学习之用,切勿作非法用途!jquery右侧导航菜单悬浮代码,向下拉动看返回顶部特效,此代码只供学习之用,切勿作非法用途!

    jQuery下最灵活的右键菜单脚本

    其功能之强大,配置之灵活,可谓是佼佼者。

    炫酷的jQuery手风琴图片和菜单插件及

    手风琴效果的应用非常广泛,我们常见的有手风琴图片切换和手风琴菜单,同时它也是焦点图的一种展现形式之一。今天我们就来分享一些基于jQuery的手风琴图片和菜单插件,并提供源代码下载,一起来看看吧。 1、jQuery...

    基于JQUERY的改进型浮动层(右键)列表菜单

    花生米AJAX-UI系列之:基于JQUERY的浮动层(右键)列表菜单0.2改进版 改版本是“使用JQUERY 自创的自定义右键菜单插件 ”的重大改进,原始版本不再使用! 可以对表格,列表,或者单个DOM容器进行右键绑定 菜单项的文字...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...

    [原创]基于JQUERY的可绑定菜单列的工具栏控件

    花生米AJAX-UI系列之:基于JQUERY的GooToolbar工具栏类UI控件0.1版 特点: 可定义四个边框有没有显示 可定义多个工具栏组,每个工具栏组可以有WIN7和经典两种样式 内置的按钮有标准按钮、可选中按钮、纯下拉菜单、...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7.jquery强大表单字符输入限制插件jQuery AlphaNumeric下载...

    jquery 动态示例

    66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...

    jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮

    主要介绍了jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮,需要的朋友可以参考下

    100多个JQuery效果示例(实例)div+css+javascrpit

    66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...

    jquery -----横向菜单导航

    ie6,ie7,ff3 测试无问题。大家收藏下,不好之处还请见谅

    jquery插件ContextMenu设置右键菜单

    Struts项目中右键菜单一般很少用到,但是一旦客户有要求,很多人就懵圈了,比如我。这个时候,当然要表现镇定,一面拍着胸口对客户承诺说绝对可以实现,一面赶紧打开百度神器,搜搜看是否有前人已经写好的插件。 ...

    JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果

    主要介绍了JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单

    主要介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    基于jquery的二级联动菜单实现代码

    基于jquery的二级联动菜单实现代码,脚本之家简单整理了几种。需要的朋友可以参考下,主要是思路

    JTree 树形菜单插件包.rar

    加入这个功能之后,使之在opera下也能正常使用。个人感觉有些混乱。不过,现在没有时间整理。  一、重要属性:  1,picPath:图片路径,默认是为”JTree/”  2,clickItem:当前树中,被点击的节点。clickItem是...

    基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

    主要介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合的相关资料,需要的朋友可以参考下

Global site tag (gtag.js) - Google Analytics