如果只用css的话就这么写吧
.level2{display:none
}
.level1 > li:hover > .level2{
display:block
}
html里大概这样的结构
<ul class="level1"><li>l1
<ul class="level2">
<li>l2</li>
<li>l2</li>
<li>l2</li>
</ul>
</li>
<li>l1
<ul class="level2">
<li>l2</li>
<li>l2</li>
<li>l2</li>
</ul>
</li>
<li>l1
<ul class="level2">
<li>l2</li>
<li>l2</li>
<li>l2</li>
</ul>
</li>
<li>l1
<ul class="level2">
<li>l2</li>
<li>l2</li>
<li>l2</li>
</ul>
</li>
</ul>
利用伪类可以实现点击打开折叠菜单，但是再次点击收起貌似就没法实现了。跟楼下说的一样，利用:hover、:active 可以设置二级菜单的样式（如height、visibility、display）以达到展开的效果。一、DOM元素
Dom:
增删改查
查找：
1.元素间关系
2.HTML
ID
class
tag
name
3.querySelector()
querySelectorAll()
//增加：
//1.创建一个元素
var a=document.createElement('a')
//2.给元素添加属性或内容：
a.href='http://www.baidu.com'
a.innerHTML='GO BAIDU'
//3.追加到dom树 父元素.appendChild(子元素)
document.querySelector('div').appendChild(a)
二、改变背景颜色
body部分：
js部分：
效果：
三，导航条
body部分：
css部分：
js部分：
效果：
四、购物车
body效果
css部分：
js部分：
效果：
五、万年历
body部分：
css部分：
js部分：
效果：
六、图片切换
body部分：
css部分：
js部分：
效果：
七、树形列表
body部分：
css部分：
js部分：
