首先引入JQUERY，js代码如下：
$("li#subli").hover(function(){$("#submenu").slideDown();},function(){$("#submenu").slideUp();});
HTML代码如下：
<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;“ ， 则巧妙解决了。。
呵呵，希望对菜单的朋友有帮助。
$("li#subli").hover(function(){$("#submenu").slideDown();},function(){$("#submenu").slideUp();});
HTML代码如下：
<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
------------------------
