如果你的项目需要制作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，否则会发生错乱。
在控制和定位分离的大思路下分别写控制和定位部分相应的代码，可能整体上看起来会比较复杂，但如果各个组件都正确的话，最后的结果一定是可以联动的起来的。
最后，为了防止划过顶部各主菜单时下面的三级级菜单发生晃动，在顶部的所有主菜单外面的定位div的高度设置要略高于主菜单的实际高度，让这个div稍微下沉到下面的二、三级菜单div中（该div实际无边框，因此下沉不影响菜单整体显示效果）。这样，无论你怎么划过主菜单，下面对应的二、三级菜单都不会晃动。对于需要更多级别联动的菜单，原理同三级联动菜单是一样的，也可以按相同方法制作。
