Time2018-11-28 10:58:31
<元字符集=“UTF-8”>
<标题>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;
}
<脚本类型=“text/javascript” src=“js/jquery-1.7.1.min.js”>
<正文>
<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>
