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

编程问答

JQuery实现旅游导航菜单应用方便

發布時間：2025/3/17 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery实现旅游导航菜单应用方便小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

實現后的效果圖是：

HTML代碼部分：

<!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"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> <title>demo</title><link?rel="stylesheet"?type="text/css"?href="css/index.css"?/><script?type="text/javascript"?src="js/jquery.js"></script> <script?type="text/javascript"?src="js/web.js"></script></head> <body><div?class="product_sort?fl"><div?class="hd">旅游產品導航</div><div?class="bd"><div?class="item"><div?class="title?one"><a?href="http://www.htmlsucai.com"><i></i>出境游</a></div><div?class="list"><a?href="http://www.htmlsucai.com">泰國</a><a?href="http://www.htmlsucai.com">首爾</a><a?href="http://www.htmlsucai.com">曼谷</a><a?href="http://www.htmlsucai.com">大阪</a><a?href="http://www.htmlsucai.com">普吉島</a></div><div?class="arrow">></div><div?class="line"></div><div?class="subitem"><div?class="inner"><div?class="tit?tit1"><div?class="name">泰國</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div><div?class="tit"><div?class="name">印度尼西亞</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div></div></div></div><div?class="item"><div?class="title?two"><a?href="http://www.htmlsucai.com"><i></i>國內游</a></div><div?class="list"><a?href="http://www.htmlsucai.com">泰國</a><a?href="http://www.htmlsucai.com">首爾</a><a?href="http://www.htmlsucai.com">曼谷</a><a?href="http://www.htmlsucai.com">大阪</a><a?href="http://www.htmlsucai.com">普吉島</a></div><div?class="arrow">></div><div?class="line"></div><div?class="subitem"><div?class="inner"><div?class="tit?tit1"><div?class="name">泰國</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div><div?class="tit"><div?class="name">印度尼西亞</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div></div></div></div><div?class="item"><div?class="title?three"><a?href="http://www.htmlsucai.com"><i></i>周邊游</a></div><div?class="list"><a?href="http://www.htmlsucai.com">泰國</a><a?href="http://www.htmlsucai.com">首爾</a><a?href="http://www.htmlsucai.com">曼谷</a><a?href="http://www.htmlsucai.com">大阪</a><a?href="http://www.htmlsucai.com">普吉島</a></div><div?class="arrow">></div><div?class="line"></div><div?class="subitem"><div?class="inner"><div?class="tit?tit1"><div?class="name">泰國</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div><div?class="tit"><div?class="name">印度尼西亞</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div></div></div></div><div?class="item"><div?class="title?four"><a?href="http://www.htmlsucai.com"><i></i>郵輪</a></div><div?class="list"><a?href="http://www.htmlsucai.com">泰國</a><a?href="http://www.htmlsucai.com">首爾</a><a?href="http://www.htmlsucai.com">曼谷</a><a?href="http://www.htmlsucai.com">大阪</a><a?href="http://www.htmlsucai.com">普吉島</a></div><div?class="arrow">></div><div?class="line"></div><div?class="subitem"><div?class="inner"><div?class="tit?tit1"><div?class="name">泰國</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div><div?class="tit"><div?class="name">印度尼西亞</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div></div></div></div><div?class="item"><div?class="title?five"><a?href="http://www.htmlsucai.com"><i></i>東南亞</a></div><div?class="list"><a?href="http://www.htmlsucai.com">泰國</a><a?href="http://www.htmlsucai.com">首爾</a><a?href="http://www.htmlsucai.com">曼谷</a><a?href="http://www.htmlsucai.com">大阪</a><a?href="http://www.htmlsucai.com">普吉島</a></div><div?class="arrow">></div><div?class="line"></div><div?class="subitem"><div?class="inner"><div?class="tit?tit1"><div?class="name">泰國</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div><div?class="tit"><div?class="name">印度尼西亞</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div></div></div></div><div?class="item"><div?class="title?six"><a?href="http://www.htmlsucai.com"><i></i>日本、韓國、朝鮮</a></div><div?class="list"><a?href="http://www.htmlsucai.com">泰國</a><a?href="http://www.htmlsucai.com">首爾</a><a?href="http://www.htmlsucai.com">曼谷</a><a?href="http://www.htmlsucai.com">大阪</a><a?href="http://www.htmlsucai.com">普吉島</a></div><div?class="arrow">></div><div?class="line"></div><div?class="subitem"><div?class="inner"><div?class="tit?tit1"><div?class="name">泰國</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div><div?class="tit"><div?class="name">印度尼西亞</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div></div></div></div><div?class="item"><div?class="title?seven"><a?href="http://www.htmlsucai.com"><i></i>歐美</a></div><div?class="list"><a?href="http://www.htmlsucai.com">泰國</a><a?href="http://www.htmlsucai.com">首爾</a><a?href="http://www.htmlsucai.com">曼谷</a><a?href="http://www.htmlsucai.com">大阪</a><a?href="http://www.htmlsucai.com">普吉島</a></div><div?class="arrow">></div><div?class="line"></div><div?class="subitem"><div?class="inner"><div?class="tit?tit1"><div?class="name">泰國</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div><div?class="tit"><div?class="name">印度尼西亞</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div></div></div></div><div?class="item"><div?class="title?eight"><a?href="http://www.htmlsucai.com"><i></i>澳洲</a></div><div?class="list"><a?href="http://www.htmlsucai.com">泰國</a><a?href="http://www.htmlsucai.com">首爾</a><a?href="http://www.htmlsucai.com">曼谷</a><a?href="http://www.htmlsucai.com">大阪</a><a?href="http://www.htmlsucai.com">普吉島</a></div><div?class="arrow">></div><div?class="line"></div><div?class="subitem"><div?class="inner"><div?class="tit?tit1"><div?class="name">泰國</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div><div?class="tit"><div?class="name">印度尼西亞</div><ul><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">新加坡</a></li><li><a?href="http://www.htmlsucai.com">菲律賓</a></li><li><a?href="http://www.htmlsucai.com">沙巴</a></li><li><a?href="http://www.htmlsucai.com">文萊</a></li><li><a?href="http://www.htmlsucai.com">藍夢島</a></li><li><a?href="http://www.htmlsucai.com">吉隆坡</a></li><li><a?href="http://www.htmlsucai.com">塞班島</a></li><li><a?href="http://www.htmlsucai.com">柬埔寨</a></li><li><a?href="http://www.htmlsucai.com">馬來西亞</a></li><li><a?href="http://www.htmlsucai.com">越南</a></li><li><a?href="http://www.htmlsucai.com">下龍灣</a></li><li><a?href="http://www.htmlsucai.com">吳哥</a></li><li><a?href="http://www.htmlsucai.com">芽莊</a></li></ul></div></div></div></div></div> </div><script?type="text/javascript"> //首頁旅游產品分類 $(".product_sort?.bd?.item").hover(function(){$(this).addClass("layer"); },function(){$(this).removeClass("layer"); }); </script></body> </html>

CSS代碼部分：

@charset?"utf-8"; /*?CSS?Document?*/ html,?body,?div,?h1,?h2,?h3,?h4,?h5,?h6,?ul,?ol,?dl,?li,?dt,?dd,?p,?blockquote,?pre,?form,?fieldset,?table,?th,?td,?input,?textarea,?hr,?img,?label,?span,select,strong,b{margin:0px;padding:0px;} fieldset,img,abbr,acronym{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} q:before,q:after{content:'';} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} caption,?th,?td{text-align:left;font-weight:normal;} a,img,button{border:none;text-decoration:none;} a,button{text-decoration:none;} a,img{border:none;outline:none;} a{color:#333;text-decoration:none;outline:none;} ul,ol{list-style:none;} table{word-break:break-all;word-wrap:break-word;} body{font-family:宋體,Arial,?Lucida?Grande,?Lucida?Sans?Unicode,?Verdana,?sans-serif;font-size:12px;font-weight:normal;color:#000;width:100%;background:#fff;}/*清除浮動*/ .clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;} .clearfix{display:inline-table;} *?html?.clearfix{height:1%;} .clearfix{display:block;} .ma{margin-left:auto;margin-right:auto;} .w980{width:980px;} .mt10{margin-top:10px;}/*旅游產品分類*/ .product_sort{margin:20px;width:226px;height:644px;background:#fff?url(../p_w_picpaths/img_226x95.jpg)?no-repeat?left?bottom;border:solid?1px?#3299fd;position:relative;?z-index:90;} .product_sort?.hd{width:226px;background:url(../p_w_picpaths/img_226x40.jpg)?no-repeat;height:40px;line-height:40px;text-indent:15px;font-size:15px;font-weight:bold;font-family:"微軟雅黑";color:#fff;} .product_sort?.bd{padding-bottom:10px;} .product_sort?.bd?.item{border-bottom:solid?1px?#3299fd;height:60px;position:relative;} .product_sort?.bd?.item?.title{width:226px;text-indent:43px;height:30px;overflow:hidden;line-height:42px;font-size:14px;font-weight:bold;color:#292929;} .product_sort?.bd?.item?.title?a{color:#3299fd;position:relative;} .product_sort?.bd?.item?.title?a?i{position:absolute;background:url(../p_w_picpaths/icon_nav.jpg)?no-repeat;} .product_sort?.bd?.item?.one?a?i{width:19px;height:19px;background-position:0?0;left:-25px;top:-3px;} .product_sort?.bd?.item?.two?a?i{width:22px;height:20px;background-position:0?-51px;left:-28px;top:-5px;} .product_sort?.bd?.item?.three?a?i{width:31px;height:23px;background-position:0?-101px;left:-34px;top:-7px;} .product_sort?.bd?.item?.four?a?i{width:25px;height:17px;background-position:0?-156px;left:-29px;top:-3px;} .product_sort?.bd?.item?.five?a?i{width:28px;height:17px;background-position:0?-207px;left:-33px;top:-1px;} .product_sort?.bd?.item?.six?a?i{width:28px;height:17px;background-position:0?-259px;left:-32px;top:-3px;} .product_sort?.bd?.item?.seven?a?i{width:26px;height:20px;background-position:0?-309px;left:-31px;top:-6px;} .product_sort?.bd?.item?.eight?a?i{width:26px;height:21px;background-position:0?-360px;left:-32px;top:-7px;} .product_sort?.bd?.item?.list{width:210px;padding-left:15px;height:30px;line-height:30px;overflow:hidden;} .product_sort?.bd?.item?.list?a{font-family:"微軟雅黑";color:#333;} .product_sort?.bd?.item?.list?a:hover{text-decoration:underline;} .product_sort?.bd?.item?.arrow{font-family:"微軟雅黑";font-size:20px;?color:#c0d7f9;position:absolute;right:10px;top:14px;} .product_sort?.bd?.item?.line{position:absolute;right:-2px;top:0px;width:2px;height:60px;background-color:#fff;z-index:95;display:none;} .product_sort?.bd?.item?.subitem{display:none;} .product_sort?.bd?.layer?.line{display:block;} .product_sort?.bd?.layer?.arrow{display:none;} .product_sort?.bd?.layer?.subitem{width:731px;background:#fff;border:solid?1px?#3299fd;border-left:none;font-family:"微軟雅黑";position:absolute;left:227px;_left:228px;top:-15px;z-index:95;min-height:60px;height:auto!important;height:60px;padding:5px?10px?15px?10px;display:block;} .product_sort?.bd?.layer?.subitem?.inner?.tit{font-size:12px;?text-align:left;?border-top:1px?dashed?#d7d7d7;padding:5px?0;} .product_sort?.bd?.layer?.subitem?.inner?.tit1{border-top:none;} .product_sort?.bd?.layer?.subitem?.inner?.tit?.name{display:block;width:90px;color:#3299fd;cursor:pointer;float:left;padding-top:3px;} .product_sort?.bd?.layer?.subitem?.inner?ul{overflow:hidden;zoom:1;display:block;margin-left:90px;width:630px;} .product_sort?.bd?.layer?.subitem?.inner?ul?li{float:left;padding:0?8px;height:25px;} .product_sort?.bd?.layer?.subitem?.inner?ul?li?a{color:#222;display:block;} .product_sort?.bd?.layer?.subitem?.inner?ul?li?a:hover{color:#3299fd;text-decoration:underline;}

JS代碼部分：

var?ua?=?navigator.userAgent.toLowerCase(); var?isIE6?=?ua.indexOf("msie?6")?>?-1;if(isIE6){try{document.execCommand("BackgroundImageCache",?false,?true);}catch(e){} } //png24 if?(!!window.DD_belatedPNG)?{DD_belatedPNG.fix('img,.header?.mid?.btn_group?ul?li.login?a,.header?.mid?.searchbox?.btn_input,.recommend?.recommend_con?.item?.btn_buy,.routes?.routes_left?.bd?.league?ul?li?.teletext?.tip'); };

注意需要引入：jQuery.js 依賴這個

這樣就可以實現這個導航欄效果了。

旅游產品導航

出境游

泰國首爾曼谷大阪普吉島

泰國

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊
沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

印度尼西亞

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

國內游

泰國首爾曼谷大阪普吉島

泰國

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊
沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

印度尼西亞

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

周邊游

泰國首爾曼谷大阪普吉島

泰國

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊
沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

印度尼西亞

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

郵輪

泰國首爾曼谷大阪普吉島

泰國

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊
沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

印度尼西亞

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

東南亞

泰國首爾曼谷大阪普吉島

泰國

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊
沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

印度尼西亞

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

日本、韓國、朝鮮

泰國首爾曼谷大阪普吉島

泰國

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊
沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

印度尼西亞

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

歐美

泰國首爾曼谷大阪普吉島

泰國

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊
沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

印度尼西亞

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

澳洲

泰國首爾曼谷大阪普吉島

泰國

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊
沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

印度尼西亞

沙巴
新加坡
菲律賓
沙巴
文萊
藍夢島
吉隆坡
塞班島
柬埔寨
馬來西亞
越南
下龍灣
吳哥
芽莊

轉載于:https://blog.51cto.com/12349645/1877425

總結

以上是生活随笔為你收集整理的JQuery实现旅游导航菜单应用方便的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Apache kafka原理与特性(0.
下一篇：任正非：不要做一个完人