IE7 sticky hover bug

该bug只存在于IE7中。

当我们在做导航菜单时，会用到CSS来控制下拉菜单的隐藏和显示，看下面的例子。

<ul> <li>菜单一</li> <ul> <li>子菜单一</li> <li>子菜单二</li> </ul> <li>菜单二</li> <li>菜单三</li> </ul>

对于隐藏和显示二级子菜单的方法有两种，我们先来看一下第一种方法：

第一种方法是对第二级的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并不会使元素消失于屏幕之外，元素仍旧会显示在屏幕上，浏览器会出现水平滚动条。所以，对于从右到左方向的网页时，我们仍旧需要第一种方法。