首页 > 代码库 > jQuery+CSS打造的一款下滑式二级菜单
jQuery+CSS打造的一款下滑式二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <title>jQuery+CSS打造的一款下滑式二级菜单丨石家庄地毯</title> <script src="/images/jquery.js"></script> <script> $(document).ready(function(){ $("li.item > ol").hide(); $("li.item").hover(function(){ $("ol",this).slideDown("fast");//$("ol",this): 寻找this中的ol. },function(){ $("ol",this).slideUp("fast"); }); }); </script> <style> body { font-family: Arial; font-size: 16px; } ol { list-style: none; margin: 0; padding: 0; } li.item { float: left; width: 150px; background: #F39; margin: 5px; } li.item a { font-size: 18px; color: #FFF; margin: 4px; } li.item ol { background: #FFF; margin: 3px; } li.item ol a { font-size: 16px; color: #000; margin: 0; } </style> </head> <body> <ol class="menu"> <li class="item"><a href="/">CsrCode.CN</a> <ol> <li><a target="_blank" href="http://www.CsrCode.cn/">网页特效</a></li> <li><a target="_blank" href="http://www.33567.cn/">Qvod电影</a></li> <li><a target="_blank" href="http://idc.csrcode.cn/">月付主机</a></li> <li><a target="_blank" href="http://www.7caidy.com/">快播电影</a></li> </ol></li> <li class="item"><a href="/">网页特效①</a> <ol> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/cddh/" title="">菜单导航特效</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/tcys/" title="">图层样式特效</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/ljwb/" title="">链接文本特效</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/txtx/" title="">图形图像特效</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/sbtx/" title="">鼠标特效代码</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/ymck/" title="">页面窗口特效</a></li> </ol></li> <li class="item"><a href="http://www.webdm.cn/jscss/">网页特效②</a> <ol> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/wybj/" title="">网页背景特效</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/rqsj/" title="">日期时间特效</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/ymss/" title="">页面搜索特效</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/bgtx/" title="">表格表单特效</a></li> <li><a target="_blank" href="http://www.CsrCode.cn/html/txdm/qtdm/" title="">其他网页特效</a></li> </ol></li> </ol> </body> </html>
jQuery+CSS打造的一款下滑式二级菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。