由于个人习惯把心得写在html文件中，所以就不另外写了。
请直接复制代码，在网页中查看效果。
代码部分：
下拉子菜单
* {
margin: 0px;
padding: 0px;
}
.menu_1 li {
list-style: none;
font-size: 25px;
line-height: 30px;
margin: 1px 10px;
padding: 5px;
width: 100px;
background-color: #FC9;
color: #FFF;
}
.menu_1 li:hover {
background-color: #F60;
}
.menu_1>ul>li {
position: relative;
float: left;
display: block;
}
.menu_1>ul>li>ul {
position: absolute;
top: 40px;
left: -10px;
height: auto;
display: none;
}
.menu_2 li {
list-style: none;
font-size: 25px;
line-height: 30px;
margin: 1px 10px;
padding: 5px;
width: 100px;
background-color: #6CF;
color: #FFF;
}
.menu_2 li:hover {
background-color: #06F;
}
.menu_2>ul>li {
position: relative;
float: left;
display: block;
}
.menu_2>ul>li>ul {
position: absolute;
top: 40px;
left: -10px;
height: 0px;
overflow: hidden;
transition: all ease-in-out 2s 0s;
}
.menu_2>ul>li:hover>ul {
height: 200px;
}
.menu_3 li {
list-style: none;
font-size: 25px;
line-height: 30px;
margin: 1px 10px;
padding: 5px;
width: 100px;
background-color: #0C9;
color: #FFF;
}
.menu_3 li:hover {
background-color: #090;
}
.menu_3>ul>li {
position: relative;
float: left;
display: block;
}
.menu_3>ul>li>ul {
position: absolute;
top: 40px;
left: -10px;
height: 0px;
overflow: hidden;
}
- L1
- L1_1
- L1_2
- L1_3
- L1_4
- L2
- L2_1
- L2_2
- L2_3
- L2_4
- L2_5
- L3
- L3_1
- L1
- L1_1
- L1_2
- L1_3
- L1_4
- L2
- L2_1
- L2_2
- L2_3
- L2_4
- L2_5
- L3
- L3_1
*过渡动画的速度都设置得很慢，尝试不停的移动鼠标，来激活onmouseover和onmouseout事件，观察差异。*
JQuery：会先执行完一个过渡动画，再执行另一个动画。所以在鼠标不停切换事件时，会先登记动画效果，再按这些顺序来进行逐一播放。所以会有很明显的延迟。
CSS3：实现过渡效果的样式属性-transition。此方法可以做到即时响应，在一个事件触发时，会先结束上一个事件的动画。但是动画的起点样式和终点样式的属性不能使用“auto”，必须是指定的值。
JS：也可以做到即时响应。而且可以做到更多更复杂的效果。但代码量较多。
效果图如下：
