JS抽屉式三级菜单应用鼠标移动时显示
功能实现，但要应用到项目中还是要修改些的，样式最少要修改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="./js/jquery-1.4.2.js" type=text/javascript></script>
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
width: 160px;
}
li ul {
display: none;
top: 20px;
}
li:hover ul, li.over ul {
display: block;
}
.two ul{
overflow: visible;
display: block;
height: 66px;
z-index: 128;
opacity: 1;
}
.two ul li{
overflow: hidden;
display: block;
height: 0px;
z-index: 60;
opacity: 0.0151515;
display:none;
}
ul li a{
display:block;
font-size:12px;
border: 1px solid #ccc;
padding:3px;
text-decoration: none;
color: #777;
}
ul li a:hover{
background-color:#f4f4f4;
}
.level3
{
margin:0;padding:0;position:absolute;
top:37px;
left:170px;
display:none;
}
.level3 li
{
margin:0;
padding:0;
display:block;
border:solid 1px red;
}
</style>
<script type="text/javascript">
$(document).ready(function ()
{
//二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
$('.level2').attr('isopen','false');
$('.level3').attr('isopen','false');
//一级菜单鼠标经过时
$('.level1>li').mouseover(
function ()
{ //如果该一级菜单下的二级菜单的isopen为false
if($(this).children(".level2").attr('isopen')=='false')
{
//所有该一级菜单下”之外“的二级菜单隐藏，加上isopen为false
$(".level2:not($(this).children('.level2'))").attr('isopen','false').slideUp("fast");
//所有三级菜单隐藏，加上isopen为false
$(".level3").attr('isopen','false').slideUp("fast");
//该一级菜单下的二级菜单弹出，加上isopen为true
$(this).children(".level2").attr('isopen','true').slideDown("fast");
}
})
//二级菜单鼠标经过时
$('.level2>li').mouseover(
function ()
{ //如果该二级菜单下的三级菜单的isopen为false
var offse=$(this).offset();
$(this).children(".level3").css('left',offse.left+161+'px');
$(this).children(".level3").css('top',offse.top+'px');
if($(this).children(".level3").attr('isopen')=='false')
{
//所有该二级菜单下”之外“的三级菜单隐藏，加上isopen为false
$(".level3:not($(this).children('.level3'))").attr('isopen','false').slideUp("fast");
//该二级菜单下的三级菜单弹出，加上isopen为true
$(this).children(".level3").attr('isopen','true').slideDown("fast");
}
})
//无下级菜单鼠标经过时
$('.levelno').mouseover(
function ()
{
//二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
$(".level2").attr('isopen','false').slideUp("fast");
$(".level3").attr('isopen','false').slideUp("fast");
})
})
//function show(obj){
//$("#"+obj).css('display','block'); //显示
//}
//function hide(obj){
//$("#"+obj).css('display','none'); //隐藏
//}
//function select(obj){
// if (obj!='false') {
// $("#" + obj).css('display', 'none');
// return obj= 'false';
// }else{
// $("#"+obj).css('display','block');
// return obj='true';
// }
//}
//$(document).ready(function(){
// //alert('111');
//
//// $.each(navroot,function(){
////
//// $(this).mouseover(function(e){
//// $(this).nextAll().slideDown("normal");
//// })
//// $(this).mouseout(function(){
////
//// var twonavroot =$(".two");
////
//// $.each(twonavroot,function(){
////
//// $(this).mouseover(function(e){
////
//// $(this).nextAll().slideDown("normal");
//// })
//// $(this).mouseout(function(){
////
////
//// var threenavroot =$(this).nextAll();
//// $.each(threenavroot,function(){
//// $(this).mouseover(function(e){
////
//// $(this).parent().slideDown("normal");
//// })
//// $(this).mouseout(function(){
//// $(this).slideUp("normal");
//// });
//// });
////// navroot.nextAll().slideUp("normal");
////// $(this).nextAll().slideUp("normal");
////
//// });
//// });
////
//// });
////
////});
//
//
// var navroot = $(".first");
// $.each(navroot,function(){
//
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");
//
//
//
// //鼠标滑过查找li下面的第一个ul然后显示；
// },function(){
// var navrootnext=$(this).nextAll();
//
// $.each(navrootnext,function(){
// $(this).show();
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");},
// function(){
// $(this).nextAll().slideUp("normal");//鼠标离开隐藏li下面d的ul；
// $(this).slideUp("normal");
// });
//
// });
// //鼠标离开隐藏li下面d的ul；
// });
//
// });
// var twonavroot = $(".two");
//
// $.each(twonavroot,function(){
//
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");
//
//
//
// //鼠标滑过查找li下面的第一个ul然后显示；
// },function(){
// var navrootnext=$(this).nextAll();
//
// $.each(navrootnext,function(){
// $(this).show();
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");},
// function(){
// $(this).nextAll().slideUp("normal");//鼠标离开隐藏li下面d的ul；
// $(this).slideUp("normal");
// });
//
// });
// //鼠标离开隐藏li下面d的ul；
// });
//
// });
//
//});
</script>
</head>
<body>
<ul id="nav" class="level1">
<li class="levelno"><a href="" >首页 </a></li>
<li>
<a href="#" class="first" >产品介绍</a>
<ul class="level2">
<li><a href="" class="two" >CSS产品介绍>></a>
<ul class="level3">
<li><a href="#">导航菜单</a></li>
<li><a href="#">浏览器</a></li>
<li><a href="#">层与布局</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">mootools</a></li>
<li><a href="#">prototype</a></li></ul>
</li>
<li><a href="" class="two">DOM产品介绍>></a>
<ul class="level3"><li><a href="">DOM产品介绍1</a></li>
<li><a href="">DOM产品介绍2</a></li>
<li><a href="">DOM产品介绍3</a></li>
<li><a href="">DOM产品介绍4</a></li>
<li><a href="">DOM产品介绍5</a></li>
<li><a href="">DOM产品介绍6</a></li></ul>
</li>
<li><a href="" class="two">XML产品介绍>></a>
<ul class="level3"><li><a href="">XML产品介绍1</a></li>
<li><a href="">XML产品介绍2</a></li>
<li><a href="">XML产品介绍3</a></li>
<li><a href="">XML产品介绍4</a></li>
<li><a href="">XML产品介绍5</a></li></ul>
</li>
<li><a href="" class="two" >Flash产品介绍>></a>
<ul class="level3">
<li><a href="">Flash产品介绍1</a></li>
<li><a href="">Flash产品介绍2</a></li>
<li><a href="">Flash产品介绍3</a></li>
<li><a href="">Flash产品介绍4</a></li>
<li><a href="">Flash产品介绍5</a></li>
<li><a href="">Flash产品介绍6</a></li></ul>
</li>
</ul>
</li>
<li><a href="#" class="first">样式</a>
<ul class="level2">
<li><a href="" class="two">XHTML样式>></a>
<ul class="level3">
<li><a href="">XHTML样式1</a></li>
<li><a href="">XHTML样式2</a></li>
<li><a href="">XHTML样式3</a></li>
<li><a href="">XHTML样式4</a></li>
<li><a href="">XHTML样式5</a></li>
</ul>
</li>
<li><a href="" class="two">XML样式>></a>
<ul class="level3">
<li><a href="">XML样式1</a></li>
<li><a href="">XML样式2</a></li></ul>
</li>
<li><a href="" class="two">CSS样式>></a>
<ul class="level3">
<li><a href="">CSS样式1</a></li>
<li><a href="">CSS样式2</a></li>
<li><a href="">CSS样式3</a></li></ul>
</li>
<li><a href="" class="two">jquery样式>></a></li>
<ul class="level3">
<li><a href="" class="two">tree样式</a></li>
<li><a href="" class="two">dome样式</a></li>
<li><a href="" class="two">stytle样式</a></li>
<li><a href="" class="two">coclor样式</a></li>
<li><a href="" class="two">abbr样式</a></li></ul>
</ul>
</li>
<li><a href="#" class="first">服务</a>
<ul class="level2">
<li><a href="" class="two">前台在线服务>></a>
<ul class="level3">
<li><a href="">前台在线服务1</a></li>
<li><a href="">前台在线服务2</a></li>
<li><a href="">前台在线服务3</a></li></ul>
</li>
<li ><a href="" class="two">网页技术服务>></a>
<ul class="level3">
<li ><a href="">网页技术服务1</a></li>
<li ><a href="">网页技术服务2</a></li>
<li ><a href="">网页技术服务3</a></li>
<li ><a href="">网页技术服务4</a></li></ul>
</li>
<li ><a href="" class="two">UI技术服务</a></li>
<li ><a href="" class="two">FLASH技术服务</a></li>
</ul>
<li class="levelno"><a href="" >交流 </a></li>
</li>
</ul>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="./js/jquery-1.4.2.js" type=text/javascript></script>
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
width: 160px;
}
li ul {
display: none;
top: 20px;
}
li:hover ul, li.over ul {
display: block;
}
.two ul{
overflow: visible;
display: block;
height: 66px;
z-index: 128;
opacity: 1;
}
.two ul li{
overflow: hidden;
display: block;
height: 0px;
z-index: 60;
opacity: 0.0151515;
display:none;
}
ul li a{
display:block;
font-size:12px;
border: 1px solid #ccc;
padding:3px;
text-decoration: none;
color: #777;
}
ul li a:hover{
background-color:#f4f4f4;
}
.level3
{
margin:0;padding:0;position:absolute;
top:37px;
left:170px;
display:none;
}
.level3 li
{
margin:0;
padding:0;
display:block;
border:solid 1px red;
}
</style>
<script type="text/javascript">
$(document).ready(function ()
{
//二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
$('.level2').attr('isopen','false');
$('.level3').attr('isopen','false');
//一级菜单鼠标经过时
$('.level1>li').mouseover(
function ()
{ //如果该一级菜单下的二级菜单的isopen为false
if($(this).children(".level2").attr('isopen')=='false')
{
//所有该一级菜单下”之外“的二级菜单隐藏，加上isopen为false
$(".level2:not($(this).children('.level2'))").attr('isopen','false').slideUp("fast");
//所有三级菜单隐藏，加上isopen为false
$(".level3").attr('isopen','false').slideUp("fast");
//该一级菜单下的二级菜单弹出，加上isopen为true
$(this).children(".level2").attr('isopen','true').slideDown("fast");
}
})
//二级菜单鼠标经过时
$('.level2>li').mouseover(
function ()
{ //如果该二级菜单下的三级菜单的isopen为false
var offse=$(this).offset();
$(this).children(".level3").css('left',offse.left+161+'px');
$(this).children(".level3").css('top',offse.top+'px');
if($(this).children(".level3").attr('isopen')=='false')
{
//所有该二级菜单下”之外“的三级菜单隐藏，加上isopen为false
$(".level3:not($(this).children('.level3'))").attr('isopen','false').slideUp("fast");
//该二级菜单下的三级菜单弹出，加上isopen为true
$(this).children(".level3").attr('isopen','true').slideDown("fast");
}
})
//无下级菜单鼠标经过时
$('.levelno').mouseover(
function ()
{
//二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
$(".level2").attr('isopen','false').slideUp("fast");
$(".level3").attr('isopen','false').slideUp("fast");
})
})
//function show(obj){
//$("#"+obj).css('display','block'); //显示
//}
//function hide(obj){
//$("#"+obj).css('display','none'); //隐藏
//}
//function select(obj){
// if (obj!='false') {
// $("#" + obj).css('display', 'none');
// return obj= 'false';
// }else{
// $("#"+obj).css('display','block');
// return obj='true';
// }
//}
//$(document).ready(function(){
// //alert('111');
//
//// $.each(navroot,function(){
////
//// $(this).mouseover(function(e){
//// $(this).nextAll().slideDown("normal");
//// })
//// $(this).mouseout(function(){
////
//// var twonavroot =$(".two");
////
//// $.each(twonavroot,function(){
////
//// $(this).mouseover(function(e){
////
//// $(this).nextAll().slideDown("normal");
//// })
//// $(this).mouseout(function(){
////
////
//// var threenavroot =$(this).nextAll();
//// $.each(threenavroot,function(){
//// $(this).mouseover(function(e){
////
//// $(this).parent().slideDown("normal");
//// })
//// $(this).mouseout(function(){
//// $(this).slideUp("normal");
//// });
//// });
////// navroot.nextAll().slideUp("normal");
////// $(this).nextAll().slideUp("normal");
////
//// });
//// });
////
//// });
////
////});
//
//
// var navroot = $(".first");
// $.each(navroot,function(){
//
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");
//
//
//
// //鼠标滑过查找li下面的第一个ul然后显示；
// },function(){
// var navrootnext=$(this).nextAll();
//
// $.each(navrootnext,function(){
// $(this).show();
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");},
// function(){
// $(this).nextAll().slideUp("normal");//鼠标离开隐藏li下面d的ul；
// $(this).slideUp("normal");
// });
//
// });
// //鼠标离开隐藏li下面d的ul；
// });
//
// });
// var twonavroot = $(".two");
//
// $.each(twonavroot,function(){
//
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");
//
//
//
// //鼠标滑过查找li下面的第一个ul然后显示；
// },function(){
// var navrootnext=$(this).nextAll();
//
// $.each(navrootnext,function(){
// $(this).show();
// $(this).hover(function(){
// $(this).nextAll().slideDown("normal");},
// function(){
// $(this).nextAll().slideUp("normal");//鼠标离开隐藏li下面d的ul；
// $(this).slideUp("normal");
// });
//
// });
// //鼠标离开隐藏li下面d的ul；
// });
//
// });
//
//});
</script>
</head>
<body>
<ul id="nav" class="level1">
<li class="levelno"><a href="" >首页 </a></li>
<li>
<a href="#" class="first" >产品介绍</a>
<ul class="level2">
<li><a href="" class="two" >CSS产品介绍>></a>
<ul class="level3">
<li><a href="#">导航菜单</a></li>
<li><a href="#">浏览器</a></li>
<li><a href="#">层与布局</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">mootools</a></li>
<li><a href="#">prototype</a></li></ul>
</li>
<li><a href="" class="two">DOM产品介绍>></a>
<ul class="level3"><li><a href="">DOM产品介绍1</a></li>
<li><a href="">DOM产品介绍2</a></li>
<li><a href="">DOM产品介绍3</a></li>
<li><a href="">DOM产品介绍4</a></li>
<li><a href="">DOM产品介绍5</a></li>
<li><a href="">DOM产品介绍6</a></li></ul>
</li>
<li><a href="" class="two">XML产品介绍>></a>
<ul class="level3"><li><a href="">XML产品介绍1</a></li>
<li><a href="">XML产品介绍2</a></li>
<li><a href="">XML产品介绍3</a></li>
<li><a href="">XML产品介绍4</a></li>
<li><a href="">XML产品介绍5</a></li></ul>
</li>
<li><a href="" class="two" >Flash产品介绍>></a>
<ul class="level3">
<li><a href="">Flash产品介绍1</a></li>
<li><a href="">Flash产品介绍2</a></li>
<li><a href="">Flash产品介绍3</a></li>
<li><a href="">Flash产品介绍4</a></li>
<li><a href="">Flash产品介绍5</a></li>
<li><a href="">Flash产品介绍6</a></li></ul>
</li>
</ul>
</li>
<li><a href="#" class="first">样式</a>
<ul class="level2">
<li><a href="" class="two">XHTML样式>></a>
<ul class="level3">
<li><a href="">XHTML样式1</a></li>
<li><a href="">XHTML样式2</a></li>
<li><a href="">XHTML样式3</a></li>
<li><a href="">XHTML样式4</a></li>
<li><a href="">XHTML样式5</a></li>
</ul>
</li>
<li><a href="" class="two">XML样式>></a>
<ul class="level3">
<li><a href="">XML样式1</a></li>
<li><a href="">XML样式2</a></li></ul>
</li>
<li><a href="" class="two">CSS样式>></a>
<ul class="level3">
<li><a href="">CSS样式1</a></li>
<li><a href="">CSS样式2</a></li>
<li><a href="">CSS样式3</a></li></ul>
</li>
<li><a href="" class="two">jquery样式>></a></li>
<ul class="level3">
<li><a href="" class="two">tree样式</a></li>
<li><a href="" class="two">dome样式</a></li>
<li><a href="" class="two">stytle样式</a></li>
<li><a href="" class="two">coclor样式</a></li>
<li><a href="" class="two">abbr样式</a></li></ul>
</ul>
</li>
<li><a href="#" class="first">服务</a>
<ul class="level2">
<li><a href="" class="two">前台在线服务>></a>
<ul class="level3">
<li><a href="">前台在线服务1</a></li>
<li><a href="">前台在线服务2</a></li>
<li><a href="">前台在线服务3</a></li></ul>
</li>
<li ><a href="" class="two">网页技术服务>></a>
<ul class="level3">
<li ><a href="">网页技术服务1</a></li>
<li ><a href="">网页技术服务2</a></li>
<li ><a href="">网页技术服务3</a></li>
<li ><a href="">网页技术服务4</a></li></ul>
</li>
<li ><a href="" class="two">UI技术服务</a></li>
<li ><a href="" class="two">FLASH技术服务</a></li>
</ul>
<li class="levelno"><a href="" >交流 </a></li>
</li>
</ul>
</body>
</html>