网站设计需要什么证/贵阳网站建设公司
这是一个相当炫的功能，让网页看起来像桌面程序，如window的开始菜单。实现原理基本和纯CSS相册差不多，但要注意的事项比较多，让我们一步步来吧。
先来一个非常简单的一级菜单与悬停效果。
<ul id="menu"><li><a href="http://www.cnblogs.com/rubylouvre/">菜单一<!--小图--><span><!--大图--></span></a></li><li><a href="http://www.cnblogs.com/rubylouvre/">菜单二<!--小图--><span><!--大图--></span></a></li><li><a href="http://www.cnblogs.com/rubylouvre/">菜单三<!--小图--><span><!--大图--></span></a></li><li class="last"><a href="http://www.cnblogs.com/rubylouvre/">菜单四<!--小图--><span><!--大图--></span></a></li>
</ul>结构很熟悉吧，就是把原来放图片的地方换成文字而已。我还特意标出来了。接着下来的表现层代码非常简单。
* {margin:0;padding:0;
}
.menu {font-size:12px;
}
.menu li {/*水平菜单*/float:left;list-style:none;
}
.menu a {display:block;position:relative;height:32px;width:100px;line-height:32px;background:#a9ea00;color:#ff8040;text-decoration:none;text-align:center;
}
.menu a:hover {background:#369;color:#fff;
}
.menu li span {display:none;position:absolute;left:0;top:32px;width:200px;height:150px;background:#B9D6FF;
}
.menu a:hover span {display:block;
}
这里有两个值得注意的地方。我们先说第一个。子菜单(span元素)的top应该能使其顶部停留在a元素的范围内，如果包含块是li元素，同理。当span的top值大于32px，如40px，我们就无法把鼠标移到span元素上。因为离开了a:hover的作用范围，span元素又重新隐藏。
对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，正因为我不是211，985，只是个普通的本科生，英语不是特别好，数学不是特别好。所以我选择了前端。工作第六个年头了，我庆幸自己选择了这条路。767-273-102 秋裙。在鹅厂做过，跟着创业头子混过。想把自己的技术分享给大家，如果你还在迷茫，也希望能进我一些绵薄之力，帮助到你。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端
.menu li span {display:none;position:absolute;left:0;top:40px;/*★★修改这里★★*/width:200px;height:150px;background:#B9D6FF;
}
第二个问题是IE6特有的，就是子菜单在对应的包含块mouseout后仍不消失的问题。hover伪类相当于moverover与moverout。我们在可以在mouseover给它的子孙元素认定一种样式，mouseout时认定另一种。换言之，display现在在IE6无法切换（img元素除外）。解决方法用visibility 代替display。
好了，现在我们真正做二级菜单，把有关span的CSS全删掉，并在结构层原span的位置改为如下代码：
<ul><li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li><li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li>
</ul>
我们在各游览器看一下，感觉非常乏力。IE6与Opera10的二级菜单项是垂直的，但我们并没有清除浮动啊？firefox3.5与chrome与safari4的二级菜单项是水平分布了，但上面好像多出一个菜单项……IE8同学这次反而是表现得最好的。我没有装IE7，所以一向忽略它。
我们重新设置一下样式，如把包含块改设在li元素上，让二级菜单项呈垂直显示。
* {margin:0;padding:0;
}
.menu {font-size:12px;
}
.menu li {/*水平菜单*/float:left;list-style:none;position:relative;/*把包含块移动li元素*/
}
.menu a {display:block;/*position:relative;发现放在a元素中，在标准游览器中惨不忍睹，和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/height:32px;width:100px;line-height:32px;background:#a9ea00;color:#ff8040;text-decoration:none;text-align:center;
}
.menu a:hover {background:#369;color:#fff;
}
/*新增的二级菜单部分*/
.menu ul ul {visibility:hidden;/*开始时是隐藏的*/position:absolute;left:0px;top:32px;
}
.menu ul a:hover ul{visibility:visible;
}
.menu ul ul li {clear:both;/*垂直显示*/text-align:left;
}发现二级菜单在firefox与safari与chrome中没有反应，弹不出来（这三个浏览器的CSS部分互相抄袭严重啊）。opera10表现得最好，IE8其次。不过，标准浏览器的所有元素都支持hover伪类，不像IE6，非带href的a元素不可。我们改写部分CSS代码：
.menu ul li:hover ul,/*非IE6*/
.menu ul a:hover ul{/*IE6*/visibility:visible;
}
二级菜单能弹出来了，但那个神秘的li元素也现形了。我用双重浮动的收缩包围(shrink-wrapping)现象都无法消除这个神秘的li元素。参考外国的代码，方法是，把整个子菜单放到a元素的外面，然后用li:hover控制样式的切换。于是结构层改写如下：
<div class="menu"><ul><li><a href="http://www.cnblogs.com/rubylouvre/">菜单一 </a><ul><li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_11</a></li><li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_12</a></li></ul></li><li><a href="http://www.cnblogs.com/rubylouvre/">菜单二</a><ul><li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_21</a></li><li><a href="http://www.cnblogs.com/rubylouvre/">二级菜单_22</a></li></ul></li><li>//***************略************</li><li>//***************略************</li></ul>
</div>