银联海购官网请点击 http://haigou.unionpay.com/
1.实现效果预览展示如下：
2.源码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>银联海购</title> 6 <link rel="stylesheet" type="text/css" href="css/main.css"> 7 </head> 8 <body> 9 <div class="nav-bar"> 10 <div class="nav-content"> 11 <div class="all-product-kinds"> 12 <p>全部商品分类</p> 13 <ul class="silder-kinds" id="nav-tab" style="display: none;"> 14 <li class="clearfix active"> 15 <dl class="main"> 16 <dt><a href="#none">母婴用品</a></dt> 17 <dd><a href="#none">奶粉</a></dd> 18 <dd><a href="#none">米粉</a></dd> 19 <dd><a href="#none">玩具</a></dd> 20 <dd><a href="#none">润肤用品</a></dd> 21 <dd><a href="#none">婴儿车</a></dd> 22 </dl> 23 <div class="silder-kinds-detail" style="display: block;"> 24 <dl> 25 <dt><a href="#none">奶粉辅食</a></dt> 26 <dd><a href="#none">营养剂</a></dd> 27 <dd><a href="#none">奶粉</a></dd> 28 <dd><a href="#none">米粉</a></dd> 29 </dl> 30 <dl> 31 <dt><a href="#none">洗护/喂哺</a></dt> 32 <dd><a href="#none">保健/安全</a></dd> 33 <dd><a href="#none">哺乳用品</a></dd> 34 <dd><a href="#none">沐浴，润肤用品</a></dd> 35 <dd><a href="#none">止尿裤</a></dd> 36 </dl> 37 <dl> 38 <dt><a href="#none">孕妇产品</a></dt> 39 <dd><a href="#none">孕妇营养用品</a></dd> 40 <dd><a href="#none">妊娠纹护理</a></dd> 41 </dl> 42 <dl> 43 <dt><a href="#none">童装</a></dt> 44 <dd><a href="#none">童鞋</a></dd> 45 <dd><a href="#none">套装</a></dd> 46 <dd><a href="#none">裤子</a></dd> 47 <dd><a href="#none">T恤</a></dd> 48 <dd><a href="#none">裙子</a></dd> 49 <dd><a href="#none">普通外套</a></dd> 50 </dl> 51 <dl> 52 <dt><a href="#none">玩具</a></dt> 53 <dd><a href="#none">婴幼玩具</a></dd> 54 <dd><a href="#none">模型玩具</a></dd> 55 <dd><a href="#none">玩偶/手办</a></dd> 56 <dd><a href="#none">益智玩具</a></dd> 57 </dl> 58 <dl> 59 <dt><a href="#none">婴儿车/车垫</a></dt> 60 <dd><a href="#none">婴儿车/车垫</a></dd> 61 </dl> 62 </div> 63 </li> 64 <li class="clearfix"> 65 <dl class="main"> 66 <dt><a href="#none">美容护肤</a></dt> 67 <dd><a href="#none">唇膏</a></dd> 68 <dd><a href="#none">粉饼</a></dd> 69 <dd><a href="#none">香水</a></dd> 70 <dd><a href="#none">美容工具</a></dd> 71 <dd><a href="#none">身体护肤</a></dd> 72 <dd><a href="#none">洁面乳</a></dd> 73 </dl> 74 <div class="silder-kinds-detail" style="display: none;"> 75 <dl> 76 <dt><a href="#none">美容护肤</a></dt> 77 <dd><a href="#none">养颜</a></dd> 78 <dd><a href="#none">BB霜</a></dd> 79 </dl> 80 <dl> 81 <dt><a href="#none">护肤品</a></dt> 82 <dd><a href="#none">乳液/面霜</a></dd> 83 <dd><a href="#none">面膜</a></dd> 84 <dd><a href="#none">化妆水</a></dd> 85 <dd><a href="#none">套装</a></dd> 86 <dd><a href="#none">卸妆</a></dd> 87 <dd><a href="#none">精华素</a></dd> 88 <dd><a href="#none">男士护肤</a></dd> 89 <dd><a href="#none">防晒霜</a></dd> 90 <dd><a href="#none">眼霜</a></dd> 91 <dd><a href="#none">洁面乳</a></dd> 92 </dl> 93 <dl> 94 <dt><a href="#none">香水/身体护理</a></dt> 95 <dd><a href="#none">香水</a></dd> 96 <dd><a href="#none">身体护理</a></dd> 97 </dl> 98 <dl> 99 <dt><a href="#none">美容工具/美发护发</a></dt> 100 <dd><a href="#none">美容工具</a></dd> 101 <dd><a href="#none">美发护发</a></dd> 102 </dl> 103 </div> 104 </li> 105 <li class="clearfix"> 106 <dl class="main"> 107 <dt><a href="#none">服装箱包</a></dt> 108 <dd><a href="#none">女鞋</a></dd> 109 <dd><a href="#none">短裙</a></dd> 110 <dd><a href="#none">西服</a></dd> 111 <dd><a href="#none">T恤衬衫</a></dd> 112 <dd><a href="#none">男运动鞋</a></dd> 113 <dd><a href="#none">腕表珠宝</a></dd> 114 </dl> 115 <div class="silder-kinds-detail" style="display: none;"> 116 <dl> 117 <dt><a href="#none">服装箱包</a></dt> 118 <dd><a href="#none">唇膏</a></dd> 119 <dd><a href="#none">BB霜</a></dd> 120 <dd><a href="#none">粉饼</a></dd> 121 <dd><a href="#none">粉底/隔离</a></dd> 122 <dd><a href="#none">眼部</a></dd> 123 <dd><a href="#none">腮红</a></dd> 124 </dl> 125 <dl> 126 <dt><a href="#none">护肤品</a></dt> 127 <dd><a href="#none">乳液/面霜</a></dd> 128 <dd><a href="#none">面膜</a></dd> 129 <dd><a href="#none">化妆水</a></dd> 130 <dd><a href="#none">套装</a></dd> 131 <dd><a href="#none">卸妆</a></dd> 132 <dd><a href="#none">精华素</a></dd> 133 <dd><a href="#none">男士护肤</a></dd> 134 <dd><a href="#none">防晒霜</a></dd> 135 <dd><a href="#none">眼霜</a></dd> 136 <dd><a href="#none">洁面乳</a></dd> 137 </dl> 138 <dl> 139 <dt><a href="#none">香水/身体护理</a></dt> 140 <dd><a href="#none">香水</a></dd> 141 <dd><a href="#none">身体护理</a></dd> 142 </dl> 143 <dl> 144 <dt><a href="#none">美容工具/美发护发</a></dt> 145 <dd><a href="#none">美容工具</a></dd> 146 <dd><a href="#none">美发护发</a></dd> 147 </dl> 148 </div> 149 </li> 150 <li class="clearfix"> 151 <dl class="main"> 152 <dt><a href="#none">食品保健</a></dt> 153 <dd><a href="#none">咖啡</a></dd> 154 <dd><a href="#none">巧克力</a></dd> 155 <dd><a href="#none">放便面</a></dd> 156 <dd><a href="#none">零食特产</a></dd> 157 <dd><a href="#none">美容养颜</a></dd> 158 <dd><a href="#none">营养保健</a></dd> 159 </dl> 160 <div class="silder-kinds-detail" style="display: none;"> 161 <dl> 162 <dt><a href="#none">食品保健</a></dt> 163 <dd><a href="#none">唇膏</a></dd> 164 <dd><a href="#none">BB霜</a></dd> 165 </dl> 166 <dl> 167 <dt><a href="#none">护肤品</a></dt> 168 <dd><a href="#none">乳液/面霜</a></dd> 169 <dd><a href="#none">面膜</a></dd> 170 <dd><a href="#none">化妆水</a></dd> 171 <dd><a href="#none">套装</a></dd> 172 </dl> 173 <dl> 174 <dt><a href="#none">香水/身体护理</a></dt> 175 <dd><a href="#none">香水</a></dd> 176 <dd><a href="#none">身体护理</a></dd> 177 </dl> 178 <dl> 179 <dt><a href="#none">美容工具/美发护发</a></dt> 180 <dd><a href="#none">美容工具</a></dd> 181 <dd><a href="#none">美发护发</a></dd> 182 </dl> 183 </div> 184 </li> 185 <li class="clearfix"> 186 <dl class="main"> 187 <dt><a href="#none">家具数码</a></dt> 188 <dd><a href="#none">日用</a></dd> 189 <dd><a href="#none">厨具</a></dd> 190 <dd><a href="#none">个护</a></dd> 191 <dd><a href="#none">生活家电</a></dd> 192 <dd><a href="#none">数码影音</a></dd> 193 <dd><a href="#none">厨房电器</a></dd> 194 </dl> 195 <div class="silder-kinds-detail" style="display: none;"> 196 <dl> 197 <dt><a href="#none">家具数码</a></dt> 198 <dd><a href="#none">唇膏</a></dd> 199 <dd><a href="#none">BB霜</a></dd> 200 <dd><a href="#none">粉饼</a></dd> 201 <dd><a href="#none">粉底/隔离</a></dd> 202 <dd><a href="#none">眼部</a></dd> 203 <dd><a href="#none">腮红</a></dd> 204 </dl> 205 <dl> 206 <dt><a href="#none">护肤品</a></dt> 207 <dd><a href="#none">乳液/面霜</a></dd> 208 <dd><a href="#none">面膜</a></dd> 209 <dd><a href="#none">化妆水</a></dd> 210 <dd><a href="#none">套装</a></dd> 211 <dd><a href="#none">卸妆</a></dd> 212 <dd><a href="#none">精华素</a></dd> 213 <dd><a href="#none">男士护肤</a></dd> 214 <dd><a href="#none">防晒霜</a></dd> 215 <dd><a href="#none">眼霜</a></dd> 216 <dd><a href="#none">洁面乳</a></dd> 217 </dl> 218 <dl> 219 <dt><a href="#none">香水/身体护理</a></dt> 220 <dd><a href="#none">香水</a></dd> 221 <dd><a href="#none">身体护理</a></dd> 222 </dl> 223 <dl> 224 <dt><a href="#none">美容工具/美发护发</a></dt> 225 <dd><a href="#none">美容工具</a></dd> 226 <dd><a href="#none">美发护发</a></dd> 227 </dl> 228 </div> 229 </li> 230 </ul> 231 </div> 232 <ul class="main-nav" > 233 <li><a href="#none">首页</a></li> 234 <li><a href="#none">海外直邮</a></li> 235 <li class="parent global-btn"> 236 <a href="#none">全球馆</a> 237 <ul class="level-2"> 238 <li><a href="#none">美国馆</a></li> 239 <li><a href="#none">欧洲馆</a></li> 240 <li><a href="#none">日本馆</a></li> 241 <li><a href="#none">韩国馆</a></li> 242 <li><a href="#none">大洋馆</a></li> 243 </ul> 244 </li> 245 <li><a href="#none">折扣专区</a></li> 246 <li><a href="#none">出境优惠</a></li> 247 <li><a href="#none">教育缴费</a></li> 248 <li><a href="#none">全球商户</a></li> 249 </ul> 250 </div> 251 </div> 252 <!--引入jQuery库--> 253 <script type="text/javascript" src="js/lib/jquery-3.1.1.min.js" ></script> 254 <!--作者：zhangjiangfeng 时间：2016-11-10 描述：选项卡内容切换--> 255 <script type="text/javascript" src="js/unionpay.js"></script> 256 </body> 257 </html>