该bug只存在于IE7中。
当我们在做导航菜单时,会用到CSS来控制下拉菜单的隐藏和显示,看下面的例子。
对于隐藏和显示二级子菜单的方法有两种,我们先来看一下第一种方法:
第一种方法是对第二级的ul添加display:none或display:block来控制其隐藏/显示。该方法 的缺点是,当页面刚加载时,通常第二级ul会被设置成display:none,但如果我们同时想要用JavaScript对第二级菜单中的内容进行操作 时,往往会失败,因为元素被显示为none。这时,我们就需要用到第二种方法。
第二种方法是,先把第二级ul的位置设为left:-9000px,可以使得该ul消失于屏幕之外,当该ul的父 li元素hover时,再把该ul的位置设为left:0px; 这样就可以解决第一种方法中提到的问题,但此方法却不适用于IE7,原因就是IE7的sticky hover bug。如何解决该bug呢?研究后发现,其实很简单,只需要将第二级ul的位置设为left:-9000%即可,IE7中对于这样的位置只支持百分比 值。
但是第二种方法在IE中也会有问题,那就是当我们制作从右到左方向的网页时(direction:rtl;), -9000并不会使元素消失于屏幕之外,元素仍旧会显示在屏幕上,浏览器会出现水平滚动条。所以,对于从右到左方向的网页时,我们仍旧需要第一种方法。