ADSFASFDA

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
第2章 商城分类导航实现（CSS版）.main li:hover .sub_right{} 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第2章 商城分类导航实现（CSS版）</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            font-size: 10pt;
        }


        .main{
            display: block;
            width: 220px;
            height: 600px;
            border:2px solid #e4393c;
            list-style: none;
            padding: 0;

            margin-top: 0;

        }
        .toptitle{
            height: 40px;
            width: 100%;
            line-height:40px;
            text-align: left;
            font-size: 11pt;
            font-weight: bold;
            color: white;
            background: #e4393c;

        }

        .main li{

            height: 30px;
            line-height: 30px;
            text-align: left;
            z-index:3;
            list-style-type: none;

            background-image:url("1.png") ;
            background-repeat: no-repeat;
            background-position: right;
            padding-left: 8px;
        }
        .main li a {
            text-decoration: none;

            color: #313131;
        }
        .sub_right{
            display: none;
            position: absolute;
            left: 220px;
            top:0;
            width: 500px;
            height: 600px;
            border: 2px solid red;
            z-index: 6;
            background: white;
        }

        .main li:hover{
            box-shadow: 0 0 2px #ccc;
            background-image: none;
        }
        .main li:hover .sub_right{
            display: block;
        }

    </style>
</head>
<body>
<div>

<ul class="main">
        <div class="toptitle">全部商品分类</div>
        <li><a href="#">图书、音响、数字产品</a>
            <div class="sub_right">图书、音响、数字产品</div>
        </li>
        <li><a href="#">家用电器</a>
            <div class="sub_right">家用电器</div>
        </li>
        <li><a href="#">手机、数码、京东通信</a>
            <div class="sub_right">手机、数码、京东通信</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>
    </div>

</body>
</html>
View Code

箭头图片 

posted on 2017-03-06 20:47  778323309  阅读(132)  评论(0)    收藏  举报