首先引入JQUERY,js代码如下:

);

HTML代码如下:

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

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

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

AD

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

jquery实现下拉菜单一例

 

相关文章: