html+css3+jquery旅游网站左侧分类导航

1、准备好需要用到的图标。

3、书写hmtl代艨位雅剖码。<div class="product_sort fl"媪青怍牙><div class="hd">旅游产品导航</div><div class="bd"> <div class="item"> <div class="title one"><a href="#"><i></i>出境游</a></div> <div class="list"> <a href="#">泰国</a> <a href="#">首尔</a> <a href="#">曼谷</a> <a href="#">大阪</a> <a href="#">普吉岛</a> </div> <div class="arrow">&gt;</div> <div class="line"></div> <div class="subitem"> <div class="inner"> <div class="tit tit1"> <div class="name">泰国</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> <div class="tit"> <div class="name">印度尼西亚</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> </div> </div> </div> <div class="item"> <div class="title two"><a href="#"><i></i>国内游</a></div> <div class="list"> <a href="#">泰国</a> <a href="#">首尔</a> <a href="#">曼谷</a> <a href="#">大阪</a> <a href="#">普吉岛</a> </div> <div class="arrow">&gt;</div> <div class="line"></div> <div class="subitem"> <div class="inner"> <div class="tit tit1"> <div class="name">泰国</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> <div class="tit"> <div class="name">印度尼西亚</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> </div> </div> </div> <div class="item"> <div class="title three"><a href="#"><i></i>周边游</a></div> <div class="list"> <a href="#">泰国</a> <a href="#">首尔</a> <a href="#">曼谷</a> <a href="#">大阪</a> <a href="#">普吉岛</a> </div> <div class="arrow">&gt;</div> <div class="line"></div> <div class="subitem"> <div class="inner"> <div class="tit tit1"> <div class="name">泰国</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> <div class="tit"> <div class="name">印度尼西亚</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> </div> </div> </div> <div class="item"> <div class="title four"><a href="#"><i></i>邮轮</a></div> <div class="list"> <a href="#">泰国</a> <a href="#">首尔</a> <a href="#">曼谷</a> <a href="#">大阪</a> <a href="#">普吉岛</a> </div> <div class="arrow">&gt;</div> <div class="line"></div> <div class="subitem"> <div class="inner"> <div class="tit tit1"> <div class="name">泰国</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> <div class="tit"> <div class="name">印度尼西亚</div> <ul> <li><a href="#">沙巴</a></li> <li><a href="#">新加坡</a></li> <li><a href="#">菲律宾</a></li> <li><a href="#">沙巴</a></li> <li><a href="#">文莱</a></li> <li><a href="#">蓝梦岛</a></li> <li><a href="#">吉隆坡</a></li> <li><a href="#">塞班岛</a></li> <li><a href="#">柬埔寨</a></li> <li><a href="#">马来西亚</a></li> <li><a href="#">越南</a></li> <li><a href="#">下龙湾</a></li> <li><a href="#">吴哥</a></li> <li><a href="#">芽庄</a></li> </ul> </div> </div> </div> </div></div>

5、书写并添加js代码。<script src="js/jquery.js"></script><script>$(".product_sort .bd .item").hover(function(){ $(this).addClass("layer");},function(){ $(this).removeClass("layer");});</script>

7、查看效果。