这是一个比较炫的功能，让网页看起来像一个桌面程序，比如窗口的开始菜单。实现原理和纯CSS相册基本类似，但是需要注意的地方很多，我们一步步来。让我们从一个非常简单的一级菜单和悬停效果开始。
我们看了各个浏览器，感觉很无力。IE6和Opera10的二级菜单项是垂直的，但是我们没有清除浮动？firefox3.5、chrome、safari4的二级菜单项横向分布，不过好像多了一个菜单项……IE8同学这次表现最好。我没有安装IE7，所以我总是忽略它。让我们重新设置样式，比如将包含块更改为li元素，以便二级菜单项垂直显示。*{保证金：0;padding:0;}.menu{font-size:12px;}.menuli{/*水平菜单*/float:left;列表样式：无；position:relative;/*putthecontainingblock移动li元素*/}.menua{display:block;/*位置：相对；在a元素中发现，在标准浏览器中惨不忍睹，纯CSS相册3的第一个运行帧在chrome中遇到同样的bug*/height:32px;宽度：100px；行高：32px；背景：#a9ea00；颜色：#ff8040；文字装饰：无；text-align:center;}.menua:hover{背景：#369;color:#fff;}/*新增二级菜单部分*/.menuulul{visibility:hidden;/*开头隐藏*/position:absolute;左：0px；顶部：32px；}.menuula:hoverul{visibility:visible;}.menuululli{clear:both;/*垂直显示*/text-align:left;}发现二级菜单在firefox、safari和chrome，弹不出来（三个浏览器的CSS部分互相抄袭严重）。Opera10表现最好，其次是IE8。但是，标准浏览器的所有元素都支持hover伪类，不像IE6，它必须有一个带href的元素。我们重写了部分CSS代码：.menuulli:hoverul,/*notIE6*/.menuula:hoverul{/*IE6*/visibility:visible;}二级菜单可以弹出，但是神秘的li元素也是可见的。即使使用收缩包装双花车，我也无法摆脱这个神秘的li元素。参考国外代码，方法是把整个子菜单放在a元素外面，然后用li:hover来控制样式切换。于是结构层改写如下：
