html结构
1 <div id="content" class="eshop head-expand tb-shop"> 2 <div id="hd"> 3 <div class="layout grid-m J_TLayout"> 4 <div class="col-main"> 5 <div class="main-wrap J_TRegion" > 6 <div class="J_TModule "> 7 8 <div class="skin-box tb-module tshop-pbsm tshop-pbsm-shop-nav-ch" style="display: block; visibility: visible;"> <s class="skin-box-tp"><b></b></s> 9 <div class="skin-box-bd"> 10 <div class="all-cats popup-container all-cats-hover"> 11 <div class="all-cats-trigger popup-trigger"> <a class="link " href="#" data-spm-anchor-id="0.0.0.0"> <span class="title"> 所有分类 </span> <i class="popup-icon"></i> </a> </div> 12 </div> 13 <ul class="menu-list"> 14 <li class="menu" > <a class="link" href="#" rel="nofollow"><span class="title">首页</span></a> </li> 15 16 <li class="menu "> <a class="link " href="#" rel="nofollow"> <span class="title">店铺动态</span> </a> </li> 17 18 <!--无下级 --> 19 <li class="menu"><a class="link" href="#" rel="nofollow"><span class="title">导航标题</span> </a></li> 20 21 <!--有下级 --> 22 <li class="menu popup-container menu-hover"><a class="link popup-trigger" href="#" rel="nofollow"><span class="title">春秋装</span> <i class="popup-icon cat-popup-i"></i></a></li> 23 24 <li class="menu"> <a class="link " href="#" rel="nofollow"> <span class="title">导航标题</span> </a> </li> 25 <li class="menu"><a class="link" href="#" rel="nofollow"><span class="title">导航标题</span> </a></li> 26 </ul> 27 </div> 28 </div> 29 </div> 30 </div> 31 </div> 32 </div> 33 </div> 34 <div id="bd" style="100%"> 35 <div class="layout grid-s5m0 J_TLayout"> 36 <div class="col-main"> 37 <div class="main-wrap J_TRegion"> </div> 38 </div> 39 <div class="col-sub J_TRegion"> </div> 40 </div> 41 </div> 42 <div id="ft"> 43 <div class="layout grid-m J_TLayout"> 44 <div class="col-main"> 45 <div class="main-wrap J_TRegion"> </div> 46 </div> 47 </div> 48 </div> 49 <div class="tshop-pbsm-shop-nav-ch"> 50 <div class="skin-box-bd" style=" 0px; height: 0px;"> 51 <div class="popup-content all-cats-popup popup overlay ext-position popup-shown overlay-shown" style="visibility: visible; z-index: 100000000; left: 325px; top: 49px;"> 52 <div class="contentbox"> 53 <div class="popup-inner"> 54 <ul class="J_TAllCatsTree cats-tree"> 55 <li class="cat fst-cat"> 56 <h4 class="cat-hd fst-cat-hd has-children"> <i class="cat-icon fst-cat-icon"></i> <a href="#" class="cat-name fst-cat-name">所有宝贝</a> </h4> 57 <div class="snd-pop"> 58 <div class="snd-pop-inner"> 59 <ul class="fst-cat-bd"> 60 <li class="cat snd-cat"> 61 <h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a href="#" class="by-label by-sale snd-cat-name" rel="nofollow">按销量</a> </h4> 62 <h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a href="#" class="by-label by-new snd-cat-name" rel="nofollow">按新品</a> </h4> 63 <h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a href="#" class="by-label by-price snd-cat-name" rel="nofollow">按价格</a> </h4> 64 </li> 65 </ul> 66 </div> 67 </div> 68 </li> 69 <li class="cat fst-cat"> 70 <h4 class="cat-hd fst-cat-hd has-children"> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">春秋装</a> </h4> 71 <div class="snd-pop"> 72 <div class="snd-pop-inner"> 73 <ul class="fst-cat-bd"> 74 <li class="cat snd-cat"> 75 <h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#"> 纯棉外套 </a> </h4> 76 </li> 77 <li class="cat snd-cat"> 78 <h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#"> 纯棉卫衣 </a> </h4> 79 </li> 80 <li class="cat snd-cat"> 81 <h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#"> 弹力纯棉卫衣 </a> </h4> 82 </li> 83 </ul> 84 </div> 85 </div> 86 </li> 87 <li class="cat fst-cat"> 88 <h4 class="cat-hd fst-cat-hd has-children cat-hd-hover"> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">小童夏装</a> </h4> 89 <div class="snd-pop ks-popup ks-overlay ks-ext-position ks-popup-shown ks-overlay-shown" style="visibility: visible; z-index: 100000000; left: 188px; top: 56px;"> 90 <div class="ks-contentbox"> 91 <div class="snd-pop-inner"> 92 <ul class="fst-cat-bd"> 93 <li class="cat snd-cat"> 94 <h4 class="cat-hd snd-cat-hd snd-cat-hd-hover"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" style="color:#fff;" href="#" data-spm-anchor-id="0.0.0.0"> T恤短袖 </a> </h4> 95 </li> 96 <li class="cat snd-cat"> 97 <h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#" data-spm-anchor-id="0.0.0.0"> 背心吊带 </a> </h4> 98 </li> 99 <li class="cat snd-cat"> 100 <h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#"> 夏裤 </a> </h4> 101 </li> 102 </ul> 103 </div> 104 </div> 105 </div> 106 </li> 107 <li class="cat fst-cat"> 108 <h4 class="cat-hd fst-cat-hd has-children"> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">秋衣秋裤</a> </h4> 109 <li class="cat fst-cat"> 110 <h4 class="cat-hd fst-cat-hd "> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">大童夏装</a> </h4> 111 </li> 112 <li class="cat fst-cat"> 113 <h4 class="cat-hd fst-cat-hd "> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">夏季套装</a> </h4> 114 </li> 115 </ul> 116 </div> 117 </div> 118 </div> 119 <div class="popup-content"> 120 <ul class="menu-popup-cats"> 121 <li class="sub-cat"><a href="#" class="cat-name" rel="nofollow">纯棉外套</a></li> 122 <li class="sub-cat"><a href="#" class="cat-name" rel="nofollow">纯棉卫衣</a></li> 123 <li class="sub-cat"><a href="#" class="cat-name" rel="nofollow">弹力纯棉卫衣</a></li> 124 </ul> 125 </div> 126 <!--下拉 --> 127 <div class="popup-content popup overlay ext-position popup-shown overlay-shown" aria-disabled="false" style="visibility: visible; z-index: 100000000; left: 780.46875px; top: 49px;"> 128 <div class="contentbox"> 129 <ul class="menu-popup-cats"> 130 <li class="sub-cat"><a href="#" class="cat-name" rel="nofollow" data-spm-anchor-id="0.0.0.0">背心吊带</a></li> 131 <li class="sub-cat sub-cat-hover"><a href="#" class="cat-name" rel="nofollow">T恤短袖</a></li> 132 <li class="sub-cat"><a href="#" class="cat-name" rel="nofollow">夏裤</a></li> 133 </ul> 134 </div> 135 </div> 136 137 </div> 138 </div> 139 </div>
全局：
/*当只有一个导航时，分类上会多menu-select加背景黑，记得修改*/ .tshop-pbsm-shop-nav-ch .menu-list .menu-selected{background:none;} .tshop-pbsm-shop-nav-ch .menu-list .menu-selected .link{background:none;border-bottom:none;} /*所有链接颜色*/ .tshop-pbsm-shop-nav-ch .skin-box-bd a{color:#fff;} /*去除所有下拉箭头*/ .tshop-pbsm-shop-nav-ch .all-cats .link .popup-icon,.tshop-pbsm-shop-nav-ch .menu-list .link .popup-icon{display:none;} /*去除所有下拉按钮和边框背景*/ .tshop-pbsm-shop-nav-ch .all-cats .link,.tshop-pbsm-shop-nav-ch .menu-list .link{background:none;border:none;} .tshop-pbsm-shop-nav-ch .all-cats .link .popup-icon,.tshop-pbsm-shop-nav-ch .menu-list .link .popup-icon{display:none;} /*整行导航底边*/ .tshop-pbsm-shop-nav-ch .skin-box-bd{border-bottom:none;} /*整行导航背景和边框*/ .tshop-pbsm-shop-nav-ch .skin-box-bd{background: none;border:none;}
所有分类
/*所有分类 字体颜色+字号+粗细*/ .tshop-pbsm-shop-nav-ch .all-cats .link{color:red;font-weight:bold;} /*一级内容 边框*/ .tshop-pbsm-shop-nav-ch .popup-content{border: 1px solid red;background:#fff;} /*一级内容 宽*/ .tshop-pbsm-shop-nav-ch .all-cats-popup{width:188px;} /*一级菜单hover 字体颜色 宽度 高度*/ .tshop-pbsm-shop-nav-ch .popup-content .cats-tree .cat-hd-hover .fst-cat-name{color:#C4B39F;width:160px;height:28px;} /*一级菜单hover 背景*/ .tshop-pbsm-shop-nav-ch .popup-content .cats-tree .cat-hd-hover{background:none;} /*二级内容 宽 背景 边框*/ .tshop-pbsm-shop-nav-ch .popup-content .cats-tree .snd-pop-inner{background:#fff;width:190px;} /*二级菜单图标 宽 高 margin 背景*/ .tshop-pbsm-shop-nav-ch .popup-content .cats-tree .snd-cat-icon{display:none;} /*二级菜单hover 字体颜色 宽 高*/ .tshop-pbsm-shop-nav-ch .popup-content .cats-tree a.snd-cat-name:hover{color:#C4B39F;width:140px;height:28px;} /*二级菜单hover 背景*/ .tshop-pbsm-shop-nav-ch .popup-content .cats-tree .snd-cat-hd:hover{background:red;}
普通导航
/*普通导航链接 字体颜色 字体大小 背景 边框*/ .tshop-pbsm-shop-nav-ch .menu-list .link{color:red;background:none;border:none;font-size:18px;} /*导航hover 背景*/ .tshop-pbsm-shop-nav-ch .menu-list .menu-hover .link{background:red;} /*内容hover 背景*/ .tshop-pbsm-shop-nav-ch .menu-popup-cats .sub-cat-hover{background:red;} /*内容hover 字体*/ .tshop-pbsm-shop-nav-ch .menu-popup-cats .sub-cat-hover a.cat-name{color:red;}