【电商6】nav dropdown

• dropdown和dd是一样大的

• 留个左侧红竖线用什么m？p？

• li和a，可以对谁指定color

• 字体图标 必须包含哪两个部分

html

/*dropdown和dt是一样大的*/
<div class="dropdown">
                <dt class="dt">全部商品分类</dt>
                <dd class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="#">手机、</a><a href="#">数码、</a><a href="#">通信</a></li>
                        <li><a href="#">电脑、</a><a href="#">办公</a></li>
                        <li><a href="#">家居、</a><a href="#">家具、</a><a href="#">家装、</a><a href="#">厨具</a></li>
                        <li><a href="#">男装、</a><a href="#">女装、</a><a href="#">童装、</a><a href="#">内衣</a></li>
                        <li><a href="#">个护化妆、</a><a href="#">清洁用品、</a><a href="#">宠物</a></li>
                        <li><a href="#">靴靴、</a><a href="#">箱包、</a><a href="#">珠宝、</a><a href="#">奢侈品</a></li>
                        <li><a href="#">运动户外、</a><a href="#">钟表</a></li>
                        <li><a href="#">汽车、</a><a href="#">汽车用品</a></li>
                        <li><a href="#">母婴、</a><a href="#">玩具乐器</a></li>
                        <li><a href="#">食品、</a><a href="#">酒类、</a><a href="#">生鲜、</a><a href="#">特产</a></li>
                        <li><a href="#">医疗保健</a></li>
                        <li><a href="#">图书、</a><a href="#">音像、</a><a href="#">电子书</a></li>
                        <li><a href="#">彩票、</a><a href="#">旅行、</a><a href="#">充值、</a><a href="#">票务</a></li>
                        <li><a href="#">理财、</a><a href="#">众筹、</a><a href="#">白条、</a><a href="#">保险</a></li>
                    </ul>
                </dd>
            </div>

common.css

.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}

.nav .dropdown {
    margin-top: 2px; /*否则压线了哦*/
    float: left;
    width: 210px;
    height: 47px;
    background-color: #b1191a;
}

.nav .dropdown dt {
    width: 100%;
    height: 100%;
    line-height: 47px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.nav .dropdown dd {    /*多出盒子的下方大盒子*/
    width: 100%;
    height: 465px;
    background-color: #c81623;
}

/*↓ 重头戏*/
.nav .dropdown dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;        /*留个左侧红竖线*/

}

.nav .dropdown dd ul li:hover {
    background-color: #fff;
}

.nav .dropdown dd ul li:hover a { /*attention*/
    color: #c81623;
}

.nav .dropdown dd ul li a {         /*无法对li指定颜色，必须是li里面的a，a里面有文字？？？*/
    color: #fff;
    padding-left: 10px;
}


/* dropdown-字体图标 */
.nav .dropdown dd ul li::after {
    content: "\e809";
    font-family: "iconfont";


    font-size: 1px;
    color: #fff;
    position: absolute;
    right: 5px;
}