实现后的效果图是：
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" />
<!--[if IE 6]>
<script type="text/javascript" language="javascript" src="js/png.js"></script>
<![endif]-->
<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 依赖这个
这样就可以实现这个导航栏效果了。
旅游产品导航
>
泰国
印度尼西亚
>
泰国
印度尼西亚
>
泰国
印度尼西亚
>
泰国
印度尼西亚
>
泰国
印度尼西亚
>
泰国
印度尼西亚
>
泰国
印度尼西亚
>
泰国
印度尼西亚
<script type="text/javascript">
//首页旅游产品分类
$(".product_sort .bd .item").hover(function(){
$(this).addClass("layer");
},function(){
$(this).removeClass("layer");
});
</script>
