css做一个简单的京东顶部导航栏

CSS二级菜单

做天猫导航栏

效果图如下：

其中要实现的二级菜单有五个，如下图：

下拉框一

下拉框二

下拉框三

下拉框四

下拉框五

具体实现代码

<!-- 头部导航栏 -->
    <div class="header">
        <!-- 头部内容部分 -->
        <div class="h-wrapper clearfix">
            <!-- 头部内容左边部分 -->
            <ul class="fl h-left-wrap">
                <li>
                    <span class="iconfont icon-jurassic_home"></span>
                    <a href="#">天猫首页</a>
                </li>
                <li>
                   <span  class="address">喵，欢迎来天猫</span>
                </li>
                <li>
                    <a href="#">请登录</a>
                </li>
                <li>
                    <a href="#">免费注册</a>
                </li>
            </ul>
            <!-- 头部内容右边部分 -->
            <ul class="fr h-right-wrap">
                <li class="my_tb">
                    <a href="#">我的淘宝</a>
                    <b></b>
                    <!-- 我的淘宝 -->
                    <div class="menu-bd">
                        <ul>
                            <li><a href="#">已买到的宝贝</a></li>
                            <li><a href="#">已卖出的宝贝</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <span class="iconfont icon-ai66"></span>
                    <a href="#">购物车</a>
                </li>
                <!-- 收藏夹 -->
                <li class="my_scj">
                    <a href="#">收藏夹</a>
                    <b></b>
                    <!-- 收藏夹下拉框 -->
                    <div class="scj_bd">
                        <ul>
                            <li><a href="#">收藏的宝贝</a></li>
                            <li><a href="#">收藏的店铺</a></li>
                        </ul>
                    </div>
                </li>
                <li class="line"></li>
                <!-- 手机二维码 -->
                <li class="my_tel">
                    <span class="iconfont icon-shouji"></span>
                    <a href="#">手机版</a>
                    <!-- 二维码图片 -->
                    <div class="tb_tel">

                    </div>
                </li>
                <li><a href="#">淘宝网</a></li>
                <!-- 商家支持 -->
                <li class="my_shop">
                    <a href="#">商家支持</a>
                    <div class="shop">
                        <ul>
                            <li>
                                <h3>商家：</h3>
                                <a href="#">商家中心</a>
                                <a href="#">天猫规则</a>
                                <a href="#">商家入驻</a>
                                <a href="#">运营服务</a>
                                <a href="#">商家品控</a>
                                <a href="#">商家工具</a>
                                <a href="#">天猫智库</a>
                                <a href="#">喵言喵语</a>
                            </li>
                            <hr>
                            <li>
                                <h3>帮助：</h3>
                                <a href="#">帮助中心</a>
                                <a href="#">问商友</a>
                            </li>
                            <hr>
                        </ul>
                    </div>
                </li>
                <!-- 网站导航部分 -->
                <li class="my_web">
                    <span class="iconfont icon-daohang"></span>
                    <a href="#">网站导航</a>
                    <b