鼠标划过多级联动菜单制作方案

如果你的项目需要制作3级以上联动菜单，就是那种鼠标划过一级菜单时二级菜单会显现、并同时会显示一个默认的三级菜单，而划过二级菜单则对应的三级菜单轮动显现的那种你会怎么做？是用css+div来制作还是用css+div+javascript，还是用jquery呢？这里介绍一个纯css制作三级联动菜单的方案。

假设你的项目要求制作一个划过位于顶部的多个主菜单之后显示与主菜单相对应的左、右侧的导航子菜单，左边的菜单是2级菜单、右边的是3级菜单。再依次划过左边导航菜单时显示相应的右边菜单（联动）。主要思路可以是这样的：

首先，控制和定位分离。所谓控制是指划过主菜单时下面的二、三级菜单的控制，定位是指二级和三级菜单的具体显示位置的定位，其中主要是三级菜单的定位，因为二级菜单定位相对简单。

在控制层面上，顶部各个主菜单是处于父div, 二、三级菜单分别处于子div和孙div的位置（大体思路）。

在定位层面上，二级菜单处于左侧，三级菜单在右侧。三级菜单要求在划过二级菜单时在右侧同一个位置联动显现。为了实现在同一个位置显现的目的，可在所有三级菜单外加一个定位div，给这个定位div设置position:relative，而给所有三级菜单设置相对于这个定位div的position:absolute。这样以来所有菜单都将在右侧同一个位置出现。注意这时候大的定位div和三级菜单div之间不能再出现其他position为relative的div，否则会发生错乱。