购物网站制作——分类导航栏nav（index.html)

1. 分析

• 父盒子有下边框
• 右边子盒子是下列列表

• 左部子盒子设置浮动，记得给右边也加上浮动，左边盒子里面的li标签也要浮动
• 不给li里面的a标签宽度，自己撑开盒子，记得转化为块级元素：display：block

    <!-- nav模块 -->
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="list.html" target="_blank">手机</a>&nbsp;
                            <a href="#">数码</a>&nbsp;
                            <a href="#">通信</a>
                        </li>
                        <li>
                            <a href="#">电脑</a>&nbsp;<a href="#">办公</a>
                        </li>
                        <li><a href="#">家具</a>&nbsp;
                            <a href="#">家厨</a>&nbsp;
                            <a href="#">家居</a>&nbsp;
                            <a href="#">厨具</a>
                        </li>
                        <li><a href="#">男装</a>&nbsp;
                            <a href="#">女装</a>&nbsp;
                            <a href="#">童装</a>&nbsp;
                            <a href="#">内衣</a>
                        </li>
                        <li>
                            <a href="#">个户化妆</a>&nbsp;
                            <a href="#">清洁用品</a>&nbsp;
                            <a href="#">宠物</a>

                        </li>
                        <li>
                            <a href="#">鞋靴</a>&nbsp;
                            <a href="#">箱包</a>&nbsp;
                            <a href="#">珠宝</a>&nbsp;
                            <a href="#">奢侈品</a>
                        </li>
                        <li>
                            <a href="#">运动户外</a>&nbsp;
                            <a href="#">钟表</a>
                        </li>
                        <li>
                            <a href="#">汽车</a>&nbsp;
                            <a href="#">汽车用品</a>
                        </li>
                        <li>
                            <a href="#">母婴</a>&nbsp;
                            <a href="#">玩具乐器</a>
                        </li>
                        <li>
                            <a href="#">食品</a>&nbsp;
                            <a href="#">酒类</a>&nbsp;
                            <a href="#">生鲜</a>&nbsp;
                            <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>
                </div>
            </div>
            <div class="navitems">
                <ul>
                    <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>
        </div>
    </nav>

.nav {
    height: 50px;
    border-bottom: 2px solid #ed3947;
}

.dropdown {
    float: left;
}

.dropdown .dt {
    width: 240px;
    height: 50px;
    background-color: #ed3947;
    color: #fff;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
}

.dropdown .dd ul {
    width: 240px;
}

.dropdown .dd ul li {
    width: 240px;
    height: 40px;
    background-color: #ed3947;
    color: #fff;
    line-height: 32px;
    font-size: 14px;
    padding: 0px 20px;
}

.dropdown .dd ul {
    position: relative;
    top: 0;
    left: 0;
}

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

.dropdown .dd ul li::after {
    float: right;
    content: '';
    font-family: 'icomoon';
}

.navitems {
    float: left;
}

.navitems ul {
    width: 800px;
    height: 40px;
}

.navitems ul li {
    float: left;
}

.navitems ul li a {
    display: block;
    width: 100px;
    height: 55px;
    line-height: 55px;
    padding: 1px 10px;
    font-size: 19px;
}