<!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上下滑动菜单,兼容ie6+,ff 2.0+,不好之处还请见谅.
花生米AJAX-UI系列之:基于JQUERY的浮动层(右键)列表菜单0.2改进版 改版本是“使用JQUERY 自创的自定义右键菜单插件 ”的重大改进,原始版本不再使用! 可以对表格,列表,或者单个DOM容器进行右键绑定 菜单项的...
jquery右侧导航菜单悬浮代码,向下拉动看返回顶部特效,此代码只供学习之用,切勿作非法用途!jquery右侧导航菜单悬浮代码,向下拉动看返回顶部特效,此代码只供学习之用,切勿作非法用途!
其功能之强大,配置之灵活,可谓是佼佼者。
手风琴效果的应用非常广泛,我们常见的有手风琴图片切换和手风琴菜单,同时它也是焦点图的一种展现形式之一。今天我们就来分享一些基于jQuery的手风琴图片和菜单插件,并提供源代码下载,一起来看看吧。 1、jQuery...
花生米AJAX-UI系列之:基于JQUERY的浮动层(右键)列表菜单0.2改进版 改版本是“使用JQUERY 自创的自定义右键菜单插件 ”的重大改进,原始版本不再使用! 可以对表格,列表,或者单个DOM容器进行右键绑定 菜单项的文字...
18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner...
花生米AJAX-UI系列之:基于JQUERY的GooToolbar工具栏类UI控件0.1版 特点: 可定义四个边框有没有显示 可定义多个工具栏组,每个工具栏组可以有WIN7和经典两种样式 内置的按钮有标准按钮、可选中按钮、纯下拉菜单、...
4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7.jquery强大表单字符输入限制插件jQuery AlphaNumeric下载...
66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...
66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...
主要介绍了jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮,需要的朋友可以参考下
66. 一款jQuery仿苹果mac os系统经典菜单效果源码 67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大...
ie6,ie7,ff3 测试无问题。大家收藏下,不好之处还请见谅
Struts项目中右键菜单一般很少用到,但是一旦客户有要求,很多人就懵圈了,比如我。这个时候,当然要表现镇定,一面拍着胸口对客户承诺说绝对可以实现,一面赶紧打开百度神器,搜搜看是否有前人已经写好的插件。 ...
主要介绍了JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
主要介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
基于jquery的二级联动菜单实现代码,脚本之家简单整理了几种。需要的朋友可以参考下,主要是思路
加入这个功能之后,使之在opera下也能正常使用。个人感觉有些混乱。不过,现在没有时间整理。 一、重要属性: 1,picPath:图片路径,默认是为”JTree/” 2,clickItem:当前树中,被点击的节点。clickItem是...
主要介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合的相关资料,需要的朋友可以参考下