一个css写的商城导航效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商城分类导航</title> <style type="text/css"> body { padding: 0; font-size: 10pt; } .topmenu { display: block; width: 220px; border: 2px solid #e4393c; margin: 0; padding: 0; } .toptitle { height: 40px; line-height: 40px; text-align: left; font-size: 11pt; font-weight: bold; color: White; background: #e4393c; padding-left: 20px; } .topmenu li { height: 30px; line-height: 30px; font-size: 11pt; list-style-type: none; text-align: left; padding-left: 8px; z-index: 3; background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg); background-repeat:no-repeat; background-position:right; } .topmenu li:hover { border:1px solid #DDD; border-right:0; box-shadow: 0 0 8px #DDD; -moz-box-shadow:0 0 8px #DDD; -webkit-box-shadow:0 0 8px #DDD; background-image:none; } .topmenu li a { text-decoration: none; color: #313131; } .topmenu li a:hover { text-decoration: underline; font-weight: bold; color: #e4393c; } .submenu { display: none; width: 715px; left: 220px; position: absolute; top: 40px; border: 1px solid #DDD; z-index: 4; background: white; box-shadow: 0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD; } .leftdiv { float:left; width:490px; margin:5px; } .rightdiv { float:left; width:200px; margin:5px; } .topmenu li:hover .submenu { display: block; } .topmenu li:hover span { background: white; display: inline-block; z-index: 20; width: 20px; height: 30px; float: right; position: relative; } .leftdiv dl { display:block; border:-bottom:1px solid #EEE; padding-bottom:6px; overflow: hidden; } .leftdiv dl dt { display: block; float:left; width:60px; text-align: right; height:22px; line-height: 22px; padding-right:6px; } .leftdiv dl dt a { color:#e4393c; font-weight: blod; text-decoration: underline; font-size:10pt; } .leftdiv dl dd { display: block; overflow: hidden; } .leftdiv dl dd a { display: block; float:left; border-left:1px solid #DDD; color:#737373; font-size: 9px; padding:0 8px; height:14px; line-height: 14px; margin:4px 0; } .rightdiv dl dd { margin:3px 0; } .rightdiv dl dt { color:#e4393c; font-weight: bold; font-size:10pt; } .rightdiv dl dd a { font-size:9pt; color:#737373; line-height: 22px; } .rightdiv dl dd a:hover { color:#737373; font-weight: normal; } </style></head><body> <ul class="topmenu"> <div class="toptitle"> 全部商品分类 </div> <li> <a href="#">图书、音像、数字商品</a><span></span> <div class="submenu"> <div class="leftdiv"> <dl> <dt><a href="">电子书</a></dt> <dd> <a href="">免费</a><a href="">小说</a><a href="">励志与成功</a> <a href="">婚恋/两性</a><a href="#">文学</a><a href="#">经管</a> <a href="#">畅读VIP</a> </dd> <dl > <dt><a href="#">生活</a></dt> <dd> <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> </dd> </dl> </div> <div class="rightdiv"> <dl> <dd> <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html"> <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" style="max-width:90%" style="max-width:90%" title="\家电" alt="商城导航代码_html/css_WEB-ITnose" > </a> </dd> </dl> <dl> <dt>推荐品牌</dt> <dd> <a href="#">美的官方旗舰店</a> </dd> <dd> <a href="#">苏泊尔旗舰店</a> </dd> </dl> </div> </div> </li> <li> <a href="#">家用电器</a> <div class="submenu"> <div class="leftdiv"> <dl> <dt><a href="">大家电</a></dt> <dd> <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> </dd> </dl> </div> </div> </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></body></html>
