jQuery三级下拉菜单标题>

* {

margin: 0;

填充: 0;

}

.menu {

宽度: 800px;

高度: 30px;

背景颜色：#000000;

边距：0 auto;

边框半径：10px;

颜色：#ffffff;

边框：1px 实线 #ccc;

顶部边距：20px;

}

ul {

列表样式：无;

}

ul li {

宽度：100px;

高度：30px;

字体大小：14px;

行高：30px;

文本对齐：居中;

浮动：左;

边框右： 1px 实心 #ffffff;

光标：指针;

}

.twobox li {

宽度：100px;

高度：30px;

背景颜色：#ccc;

颜色：#000;

字体大小：14px;

行高：30px;

位置：相对;

边框：0px;

}

.twobox li:hover {

颜色：#ffffff;

背景颜色：#000;

}

.三 {

位置：绝对；

顶部：0；

左侧：100px；

}

.三里 {

宽度：99px;

高度：30px;

行高：30px;

边框：0;

}

$(document).ready(function(){

隐藏 //二级三级菜单

$(".twobox ").hide()

$(". Three").hide()

//鼠标移动到包含二级菜单的一级菜单时显示

$(".one>li").mouseover(function(){

$(this).find(".twobox").slideDown(500)

})

//鼠标移除时隐藏

$(".one>li").mouseleave(function(){

$(this).find(".twobox") .slideUp(500)

});

//当鼠标移动到包含三级菜单的二级菜单时显示

$(".two"). mouseover(function(){

$(this).find(". Three").slideDown(500)

})

//当鼠标移除时隐藏

$(".two").mouseleave(function(){

$(this).find(". Three").slideUp(500)

})

})

//.find()浏览      .mouseover鼠标移动   .mouseleave鼠标移除  .slideDown()滑动方式    .slideUp()滑动方式隐藏

//总结在html方面出现卡壳浪费了很多时间  在jQuery方面比较稳定

<div class="menu">

<ul class="one">

<li>首页</li>

<li>木叶

<ul class="twobox">

<li>猿飞一族</li>

<li class="two">千手一族

<ul class="three">

<li>大筒木阿修罗</li>

<li>千手柱间</li>

<li>千手扉间</li>

<li>千手绳树</li>

</ul>

</li>

<li class="two">宇智波一族

<ul class="three">

<li>大筒木因陀罗</li>

<li>宇智波斑</li>

<li>宇智波泉奈</li>

<li>宇智波佐助</li>

</ul>

</li>

<li>奈良一族</li>

</ul>

</li>

<li>岩忍

<ul class="twobox">

<li>尘</li>

<li class="two">影

<ul class="three">

<li>初代</li>

<li>二代</li>

<li>三</li>

<li>空</li>

</ul>

</li>

<li class="two">熔

<ul class="three">

<li>路人甲</li>

<li>路人乙</li>

<li>路人丙</li>

<li>路人丁</li>

</ul>

</li>

</ul>

</li>

<li>沙忍</li>

<li>雾忍</li>

<li>云忍</li>

</ul>

</div>

</body>

</html>

我需要你的源码