最近对菜单进行了一项改造，在这里给大家分享一下成果。

我们在网上可以看到很多这样的菜单代码，但你会发现，无一例外的会出现因窗口变小后，菜单出现层次问题。为彻底解决这样的问题，我对其进行了一个优化：

1.保持原有的菜单层次结构为基础：
即：

<ul>
    <li><a href="###">1级菜单</a>
        <ul>
            <li>2级子菜单</li>
            <li><a href="###">2级子菜单</a>
                <ul>
                                <li><a href="###">3级子菜单</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

优化为：
 

<ul id="menu">
    <li id="parent_1" class="parent"><a href="###">1级菜单</a>
        <div  id="child_1">
        <ul>
            <li>2级子菜单</li>
            <li><a href="###">2级子菜单</a>
                <ul>
                                <li><a href="###">3级子菜单</a></li>
                </ul>
            </li>
        </ul>
        </div>
    </li>
</ul>

2.在BODY的最外层添加一个临时<div>，用来显示菜单用的。
3.我这里就图方便了，JS就引用jQuery库了。
4.原理就是处理1级菜单(有样式parent标示：$(".parent") )的MouseOver事件，将对应(通过id对应：如parent_1对应child_1)的2级层次的菜单内容代码赋值给临时DIV，然后把临时DIV显示在对应位置。
5.通过CSS控制，临时DIV中的3级菜单也会自动的在鼠标hover上去时出现。
6.通过CSS expression，还能对出现的3级子菜单的位置自动出现在适当的位置，这样可以解决窗口太小的时候子菜单看不见的问题。

原理就是以上所说的了，下面贴一下实际的代码吧（调试时要注意jQuery路径）。

IE7不兼容调查结果：IE7对expression表达式可能存在不兼容的地方，具体已经在代码中说明，请大家斟酌使用。