二级菜单及手风琴菜单

效果图如上

HTML代码如下：

  个人认为最合理的布局方式：使用ul布局。每个li中再嵌套一个ul表示二级菜单

CSS样式代码如下：

在设置一级菜单hover效果时，一定要记得是要选择一级菜单中的li标签，如果是选择a标签的话，那么二级菜单虽然可以出现但是却不能点击。

二、 手风琴菜单：

效果图如上

HTML代码采用跟上面二级菜单一样的布局，不同之处在于原先ul是垂直分布，手风琴这个需要让元素并排排列

CSS代码：