纯CSS仿京东导航

2017-09-12 19:32:31来源:CSDN作者:Annaluo人点击

分享

实现效果如下:(ps:右边图片是随便放的=_=)




具体代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>分类导航一级菜单制作(CSS版)</title>    <style type="text/css">        body{            padding:0;            font-size: 10px;        }        .topmenu{            display: block;            width: 220px;            border: 2px solid #e4393c;            margin: 0;            padding: 0;        }        .toptitle{            height: 40px;            line-height: 40px;            text-align: left;            font-size: 11px;            font-weight:bold;            color: White;            background: #e4393c;            padding-left: 20px;        }        .topmenu li{            height: 30px;            line-height: 30px;            font-size: 11px;            list-style-type: none;            text-align: left;            padding-left: 8px;            z-index: 3;            background-image: url(images/右箭头.jpg);            background-repeat: no-repeat;            background-position: right;        }        .topmenu li a{            text-decoration:none ;            color: #313131;        }        .topmenu li a:hover{            text-decoration: underline;            font-weight: bold;            color: #e4393c;        }        .topmenu li:hover{            background-image:none;            border: 1px solid #DDD;            border-right: 0;            box-shadow:0 0 8px #DDD ;//IE            -moz-box-shadow:0 0 8px #DDD;//firefox            -webkit-box-shadow:0 0 8px #DDD;//chrome        }        .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 ;//IE            -moz-box-shadow:0 0 8px #DDD;//firefox            -webkit-box-shadow:0 0 8px #DDD;//chrome        }        .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: bold;            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 #CCC;            color: #737373;            font-size: 9pt;            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="#">免费</a><a href="#">小说</a><a href="#">励志</a>                        <a href="#">文学</a><a href="#">经管</a><a href="#">畅读</a>                    </dd>                </dl>                <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><a href="#">畅读</a>                    </dd>                </dl>                <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><a href="#">畅读</a>                    </dd>                </dl>            </div>            <div class="rightdiv">                <dl>                    <dd>                        <a href="#">                            <img src="images/1.jpg" width="194" height="70">                        </a>                    </dd>                    <dd>                        <a href="#">                            <img src="images/2.png" width="194" height="70">                        </a>                    </dd>                </dl>                <dl>                    <dt>推荐品牌</dt>                    <dd>                        <a href="#">美的官方···</a>                    </dd>                    <dd>                        <a href="#">美的官方···</a>                    </dd>                    <dd>                        <a href="#">美的官方···</a>                    </dd>                    <dd>                        <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>    <li><a href="#">营养保健</a></li></ul></body></html>


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台