jQuery实现二级下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
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实现二级下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： allgro pcb铜皮编辑_Alleg
- 下一篇： java识别答题卡纸_答题卡读取答案的原