首先引入JQUERY，js代码如下：

jquery 下拉菜单分页 jquery实现下拉菜单_子菜单

jquery 下拉菜单分页 jquery实现下拉菜单_jquery 下拉菜单分页_02

$("li#subli").hover(function()
{$("#submenu").slideDown();},function()
{$("#submenu").slideUp();});

HTML代码如下：


jquery 下拉菜单分页 jquery实现下拉菜单_jquery 下拉菜单分页_03

<ul id="nav">
<li id="subli" style="position:relative;"><a id="pmenu" href="/edu">英国教育</a>
    <ul id="submenu" style="display:none; position:absolute; width:90px; height:100px; z-index:1; background:#ef0000; top:22px; left:0px; padding-top:5px;">
        <li><a href="/edu/gaozhong">高中</a></li>
        <li><a href="/edu/benke">本科</a></li>
        <li><a href="/edu/yanjiusheng">研究生</a></li>
        <li><a href="/edu/qita">其他</a></li>
    </ul>
</li>
</ul>

其中有个小插曲，就是事件在A的HOVER上触发时，移开后子菜单就收缩了，但设置了事件在LI上触发后问题依旧，于是去吃午饭，吃饭后灵感来了，把子菜单与菜单重合一部分，设置：”top:22px; padding-top:5px;“ ， 则巧妙解决了。。


呵呵，希望对菜单的朋友有帮助。

AD

------------------------