纯CSS代码实现导航菜单，推荐在chrome预览！
预览请点击这里：mygithub
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="关键字1,关键字2" /> 6 <meta name="Description" content="描述信息" /> 7 <title>Document</title> 8 <!--CSS/JS--> 9 <style type="text/css"> 10 *{margin:0;padding:0;} 11 ul,li{list-style:none;} 12 body{font-size:14px;font-family:"微软雅黑";} 13 .top-menu{display:block;border:2px solid #e4393c;width:220px;} 14 .top-title{background:#e4393c;color:white;height:30px;line-height:30px;font-size:14px;padding-left:10px;} 15 .top-menu li{display:block;padding-left:8px;height:30px;line-height:30px;background-image:url(1.jpg);background-repeat:no-repeat;background-position:right;} 16 .top-menu li:hover{background:none;border:1px solid #ddd;box-shadow:0 0 8px #ddd;z-index:3;} 17 .top-menu a{text-decoration:none;color:black;} 18 .top-menu a:hover{font-weight:900;text-decoration:underline;color:#e4393c;} 19 .content{background:white;position:absolute;left:210px;top:30px;display:none;box-shadow:0 0 8px #ddd;z-index:4px;} 20 .content .div-left{width:500px;float:left;margin:5px;} 21 .content .div-right{width:220px;float:left;margin:5px;} 22 .top-menu li:hover .content{display:block;} 23 .top-menu li:hover span{position:relative;width:20px;height:30px;display:inline-block;float:right;background:white;z-index:20;} 24 .div-left dl{display:block;overflow:hidden;padding-bottom:6px;border-bottom: 1px solid #EEE;} 25 .div-left dl dt{display:block;height:22px;width:60px;line-height:22px;text-align:right;float:left;padding-right:6px;} 26 .div-left dl dd{display:block;overflow:hidden;} 27 .div-left dl dt a{color: #e4393c;font-weight: bold;text-decoration: underline; 28 font-size: 10pt;} 29 .div-left dl dd a{ display:block;float:left;border-left:1px solid #CCC;color: #737373;font-size: 9pt;padding: 0 8px;height: 14px;line-height: 14px;margin: 4px 0;} 30 .div-right dl{margin:13px;} 31 .div-right dl dt{color: #e4393c;font-weight: bold;} 32 </style> 33 34 <script type="text/javascript"> 35 36 </script> 37 </head> 38 <body> 39 <!--div--> 40 <ul class="top-menu"> 41 <div class="top-title">全部商品分类</div> 42 <li><a href="#">图书、音像、数字商品</a><span></span> 43 <div class="content"> 44 <div class="div-left"> 45 <dl> 46 <dt><a href="#">电子书</a></dt> 47 <dd> 48 <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a> 49 <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> 50 </dd> 51 </dl> 52 <dl> 53 <dt><a href="#">数字音乐</a></dt> 54 <dd> 55 <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a> 56 <a href="#">乡村民谣</a> <a href="#">有声读物</a> 57 </dd> 58 </dl> 59 <dl> 60 <dt><a href="#">音像</a></dt> 61 <dd> 62 <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a> 63 </dd> 64 </dl> 65 <dl> 66 <dt><a href="#">文艺</a></dt> 67 <dd> 68 <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a 69 href="#">艺术</a> 70 </dd> 71 </dl> 72 <dl> 73 <dt><a href="#">人文社科</a></dt> 74 <dd> 75 <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a> 76 <a href="#">哲学/宗教</a> <a href="#">社会科学</a> 77 </dd> 78 </dl> 79 <dl> 80 <dt><a href="#">经管励志</a></dt> 81 <dd> 82 <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a> 83 </dd> 84 </dl> 85 <dl class="fore7"> 86 <dt><a href="#">生活</a></dt> 87 <dd> 88 <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a> 89 <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a> 90 <a href="#">动漫/幽默</a> <a href="#">体育/运动</a> 91 </dd> 92 </dl> 93 <dl> 94 <dt><a href="#">科技</a></dt> 95 <dd> 96 <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#"> 97 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a> 98 </dd> 99 </dl> 100 <dl> 101 <dt><a href="#">少儿</a></dt> 102 <dd> 103 <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a> 104 <a href="#">11-14岁</a> 105 </dd> 106 </dl> 107 <dl> 108 <dt><a href="#">教育</a></dt> 109 <dd> 110 <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a> 111 </dd> 112 </dl> 113 <dl> 114 <dt><a href="#">其它</a></dt> 115 <dd> 116 <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a> 117 <a href="#">杂志/期刊</a> 118 </dd> 119 </dl> 120 </div> 121 <div class="div-right"> 122 <dl> 123 <dt><a href="#"><img src="ad1.jpg" width="194" height="70" alt="1折秒家电"></a></dt> 124 <dt><a href="#"><img src="ad2.jpg" width="194" height="70" alt="小家电引爆红六月"></a></dt> 125 <dt>推荐品牌</dt> 126 <dd><a href="#">美的官方旗舰店</a></dd> 127 <dd><a>苏泊尔旗舰店</a></dd> 128 <dd><a href="#">九阳旗舰店</a></dd> 129 <dd><a href="#">东陵旗舰店</a></dd> 130 <dd><a href="#">海尔统帅旗舰店</a></dd> 131 <dd><a href="#">小熊旗舰店</a></dd> 132 </dl> 133 </div> 134 </div> 135 </li> 136 <li><a href="#">家用电器</a><span></span> 137 <div class="content"> 138 <div class="div-left"> 139 <dl> 140 <dt><a href="#">电视</a></dt> 141 <dd> 142 <a href="#">12.12狂欢</a><a href="#">合资品牌</a> <a href="#">国产品牌</a> <a href="#">互联网品牌</a> 143 </dd> 144 <dt><a href="#">空调</a></dt> 145 <dd> 146 <a href="#">壁挂式空调</a> <a href="#">柜式空调</a> <a href="#">中央空调空调配件</a> 147 </dd> 148 <dt><a href="#">洗衣机</a></dt> 149 <dd> 150 <a href="#">滚筒洗衣机</a> <a href="#">洗烘一体机</a> <a href="#">波轮洗衣机</a> <a href="#">迷你洗衣机</a> <a href="#">洗衣机配件</a> 151 </dd> 152 <dt><a href="#">冰箱</a></dt> 153 <dd> 154 <a href="#">多门</a> <a href="#">对开门</a> <a href="#">三门</a> <a href="#">双门</a> <a href="#">冷柜/冰吧</a> <a href="#">酒柜</a> <a href="#">冰箱配件</a> 155 </dd> 156 <dt><a href="#">厨卫大电</a></dt> 157 <dd> 158 <a href="#">油烟机</a> <a href="#">燃气灶</a> <a href="#">烟灶套装</a> <a href="#">消毒柜</a> <a href="#">洗碗机</a> <a href="#">电热水器</a> <a href="#">燃气热水器</a> <a href="#">嵌入式厨电</a> 159 </dd> 160 <dt><a href="#">厨房小电</a></dt> 161 <dd> 162 <a href="#">小家电狂欢</a> <a href="#">电饭煲</a> <a href="#">微波炉</a> <a href="#">电烤箱</a> <a href="#">电磁炉</a> <a href="#">电压力锅</a> <a href="#">豆浆机</a><a href="#">咖啡机</a> <a href="#">面包机</a> <a href="#">榨汁机</a> <a href="#">料理机</a> <a href="#">电饼铛</a> <a href="#">养生壶/煎药壶</a> <a href="#">酸奶机</a><a href="#">煮蛋器</a> <a href="#">电水壶/热水瓶</a> <a href="#">电炖锅</a> <a href="#">多用途锅</a> <a href="#">电烧烤炉</a> <a href="#">电热饭盒</a> <a href="#">其它厨房电器</a> 163 </dd> 164 <dt><a href="#">生活电器</a></dt> 165 <dd> 166 <a href="#">取暖电器</a> <a href="#">吸尘器</a> <a href="#">净化器</a> <a href="#">扫地机器人</a> <a href="#">加湿器</a> <a href="#">挂烫机/熨斗</a> <a href="#">电风扇</a> <a href="#">冷风扇</a> <a href="#">插座</a> <a href="#">电话机</a> <a href="#">饮水机</a> <a href="#">净水器</a> <a href="#">除湿机</a> <a href="#">干衣机</a> <a href="#">清洁机</a> <a href="#">收录/音机</a> <a href="#">其它生活电器</a> <a href="#">生活电器配件</a> 167 </dd> 168 <dt><a href="#">个护健康</a></dt> 169 <dd> 170 <a href="#">剃须刀</a> <a href="#">口腔护理</a> <a href="#">电吹风</a> <a href="#">美容器</a> <a href="#">卷/直发器</a> <a href="#">理发器</a> <a href="#">剃/脱毛器</a> <a href="#">足浴盆</a> <a href="#">健康秤/厨房秤</a> <a href="#">按摩器</a> <a href="#">按摩椅</a> <a href="#">计步器/脂肪检测仪</a> <a href="#">其它健康电器</a> 171 </dd> 172 <dt><a href="#">家庭影音</a></dt> 173 <dd> 174 <a href="#">家庭影院</a> <a href="#">迷你音响</a> <a href="#">DVD</a> <a href="#">电视影音配件</a> 175 </dd> 176 <dt><a href="#">进口电器</a></dt> 177 <dd> 178 <a href="#">进口电器</a> 179 </dd> 180 </dl> 181 </div> 182 <div class="div-right"> 183 <dl> 184 <dt><a href="#"><img src="ad1.jpg" width="194" height="70" alt="1折秒家电"></a></dt> 185 <dt><a href="#"><img src="ad2.jpg" width="194" height="70" alt="小家电引爆红六月"></a></dt> 186 <dt>推荐品牌</dt> 187 <dd><a href="#">美的官方旗舰店</a></dd> 188 <dd><a>苏泊尔旗舰店</a></dd> 189 <dd><a href="#">九阳旗舰店</a></dd> 190 <dd><a href="#">东陵旗舰店</a></dd> 191 <dd><a href="#">海尔统帅旗舰店</a></dd> 192 <dd><a href="#">小熊旗舰店</a></dd> 193 </dl> 194 </div> 195 </div> 196 </li> 197 <li><a href="#">手机、数码</a></li> 198 <li><a href="#">电脑、办公</a></li> 199 <li><a href="#">家居、家具、家装、厨具</a></li> 200 <li><a href="#">服饰内衣、珠宝首饰</a></li> 201 <li><a href="#">个护化妆</a></li> 202 <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li> 203 <li><a href="#">运动户外</a></li> 204 <li><a href="#">汽车用品</a></li> 205 <li><a href="#">母婴、玩具乐器</a></li> 206 <li><a href="#">食品饮料、酒类、生鲜</a></li> 207 <li><a href="#">营养保健</a></li> 208 </ul> 209 210 211 </body> 212 213 </html>
