悬浮鼠标实现下拉菜单

前端页面实现下拉菜单有很多方式。

1. 设置一个div，然后下面有一个子div。通过控制子div的显隐来实现菜单的显示和隐藏。
2. 设置li列表元素，把div放在列表元素下。通过控制列表来实现菜单显隐。这是常用的方式。

我们来了解一下第二种方式来控制菜单。

 <div class="div1_2_2">
            <ul class="ul1">
                <li class="LI" id="LI1" onmouseover="change_LI(this.id)" onmouseout="change_LI2(this.id)">首  页</li>
                <li class="LI" id="LI2" onmouseover="change_meau(this.id)" onmouseout="change_meau2(this.id)">学校状况
                     <div class="div1_2_3">
                        <ul class="ul2">
                            <li class="LI1">学校简介</li>
                            <li class="LI1">学校章程</li>
                            <li class="LI1">历任领导</li>
                            <li class="LI1">现任领导</li>
                            <li class="LI1">虚拟校园</li>
                            <li class="LI1">校园风光</li>   
                        </ul>
                    </div>
                </li>
                <li class="LI" id="LI3" onmouseover="change_LI(this.id)" onmouseout="change_LI2(this.id)">机构设置</li>
                <li class="LI" id="LI4" onmouseover="change_LI(this.id)" onmouseout="change_LI2(this.id)">师资队伍</li>
                <li class="LI" id="LI5" onmouseover="change_LI(this.id)" onmouseout="change_LI2(this.id)">学科专业</li>
                <li class="LI" id="LI6" onmouseover="change_LI(this.id)" onmouseout="change_LI2(this.id)">招生信息</li>
                <li class="LI" id="LI7" onmouseover="change_LI(this.id)" onmouseout="change_LI2(this.id)">人才招聘</li>
                <li class="LI" id="LI8" onmouseover="change_LI(this.id)" onmouseout="change_LI2(this.id)">合作办学</li>
                <li class="LI" id="LI9" onmouseover="change_LI(this.id)" onmouseout="change_LI2(this.id)">信息公开</li>
            </ul>
        </div>