商城导航代码

　　一个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"
                                   width="194" height="70" title="\家电">
                           </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>
posted @ 2015-08-23 17:47 王亚辉阅读(452) 评论(0) 编辑收藏举报
会员力量，点亮园子希望
刷新页面返回顶部
张扬岁月、敢为天下先

商城导航代码

公告
