小编给大家分享一下CSS多级菜单的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
先来一个非常简单的一级菜单与悬停效果。
结构很熟悉吧,就是把原来放图片的地方换成文字而已。我还特意标出来了。接着下来的表现层代码非常简单。
这里有两个值得注意的地方。我们先说第一个。子菜单(跨度元素)的顶部应该能使其顶部停留在一元素的范围内,如果包含块是李元素,同理。当跨度最大的值大于32 px,如40像素,我们就无法把鼠标移到跨度元素上。因为离开了:悬停的作用范围,跨度元素又重新隐藏。
第二个问题是IE6特有的,就是子菜单在对应的包含块mouseout后仍不消失的问题.hover伪类相当于moverover与moverout。我们在可以在鼠标悬停给它的子孙元素认定一种样式,mouseout时认定另一种,换言之,显示现在在IE6无法切换(img元素除外)。解决方法用能见度代替显示。
好了,现在我们真正做二级菜单,把有关跨度的CSS全删掉,并在结构层原跨度的位置改为如下代码:
我们在各游览器看一下,感觉非常乏力.IE6与Opera10的二级菜单项是垂直的,但我们并没有清除浮动啊? firefox3.5与铬与safari4的二级菜单项是水平分布了,但上面好像多出一个菜单项……IE8同学这次反而是表现得最好的。我没有装IE7,所以一向忽略它。
我们重新设置一下样式,如把包含块改设李在元素上,让二级菜单项呈垂直显示。
发现二级菜单在firefox与safari与chrome中没有反应,弹不出来(这三个浏览器的CSS部分互相抄袭严重啊).opera10表现得最好,IE8其次。不过,标准浏览器的所有元素都支持hover伪类,不像IE6,非带href的一元素不可。我们改写部分CSS代码:
