日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery实现二级下拉菜单

發布時間:2023/12/16 编程问答 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery实现二级下拉菜单 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery實現二級下拉菜單

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>二級下拉菜單</title><style>/* 公共樣式 */body,ul,li {margin:0;padding: 0;list-style: none;}.header-nav {position: relative;top: 30px;left: 50%;margin-left: -360px;}/* 一級菜單 */.header-nav .one-nav>li{float: left;width: 90px;height: 40px;background-color: #333333;text-align: center;lineheight: 40px;cursor: pointer;color: #b0b0b0;}.header-nav .one-nav>li:hover {background-color: #424242;color: #ffffff;}/* 二級菜單 */.header-nav .one-nav .two-nav {display: none;}.header-nav .one-nav .two-nav>li {background-color: #424242;border-bottom: 1px solid black;}</style> <script src="public/jquery.min.js"></script> <script>$(function(){$('.header-nav .one-nav>li').mouseenter(function(){$(this).find('ul').stop().slideDown();});$('.header-nav .one-nav>li').mouseleave(function(){$(this).find('ul').stop().slideUp();});}) </script> </head> <body> <nav class="header-nav"><ul class="one-nav"><li><span>一級菜單</span><ul class="two-nav"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li><li><span>一級菜單</span><ul class="two-nav"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li><li><span>一級菜單</span><ul class="two-nav"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li><li><span>一級菜單</span><ul class="two-nav"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li><li><span>一級菜單</span><ul class="two-nav"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li><li><span>一級菜單</span><ul class="two-nav"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li><li><span>一級菜單</span><ul class="two-nav"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li><li><span>一級菜單</span><ul class="two-nav"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul></li></ul> </nav> </body> </html>

總結

以上是生活随笔為你收集整理的jQuery实现二级下拉菜单的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。