CSS/Javascript/jQuery实现IE678兼容下拉菜单效果，子菜单不消失办法

<ul class="main">
    <li>
        <a href=""></a>
        <ul class="sub">
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
</ul>

一般结构如上，由于a标签中无法嵌套a标签，故ul.sub需要和主菜单a平级。

由于IE6无法支持li:hover，故纯css无法实现，需要用上js

代码写好测试时发现，鼠标经过主菜单li后二级菜单显示，但鼠标一旦离开li，二级菜单就会消失

解决办法：

首先、确保子菜单与主菜单之间无空隙；

其次、确保子菜单ul有background（颜色随意），如果background加在子菜单的li或者a上，需要注意li之间无空隙。（重点）

这是因为IE6-8下，若子菜单仅有文字，则鼠标必须置于文字之上，才会触发hover效果。

上图，

左边加了背景，则只要鼠标置于蓝色背景范围内，就算作hover，只要蓝色背景区域和主菜单li没有空隙，二级菜单就不会消失；

右边是没有背景，则鼠标必须置于黑色文字上才算hover，所以这样的情况下，二级菜单很容易消失。