前端 — 淘宝商城首页（一）

淘宝商城 — 导航条

效果图

div+css实现

1.HTML代码

  <!-- 头部导航 -->
    <div id="top">
        <div class="header">
            <div class="header-nav">
                <div class="nav-right">
                    <ul>
                        <li class="nav_right_item items_color nav_right_item_list_daohang">
                            <div class="nav_right_list_item item_color_list">
                                <a href="#"><i class="iconfont">&#xe66c;</i>网站导航<span class="iconfont">&#xe615;</span></a>
                            </div>
                            <div class="nav_right_item_list nav_right_item_list_daohang" >
                                <div id="nav_test" class="ul_list ul_list_0" >
                                    <div class="ul_title">
                                        <h4 style="color: #fc4200;">主题市场</h4>
                                    </div>
                                    <div class="ul_items">
                                        <ul>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">女装</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">男装</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">内衣</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">鞋靴</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">箱包</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">婴童</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">家电</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">数码</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">手机</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">眼妆</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">珠宝</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">眼镜</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">手表</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">户外</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">运动</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">乐器</a></li>
                                            <li class="items_list_nav" style="width: 20%;"><a href="#">箱包</a></li>
                                            <li class="items_list_nav"style="width: 20%;"><a href="#">婴童</a></li>
                                            <li class="items_list_nav"style="width: 20%;"><a href="#">家电</a></li>
                                            <li class="items_list_nav"style="width: 20%;"><a href="#">数码</a></li>
                                            <li class="items_list_nav"style="width: 20%;"><a href="#">手机</a></li>
                                            <li class="items_list_nav"style="width: 20%;"><a href="#">眼妆</a></li>
                                            <li class="items_list_nav"style="width: 20%;"><a href="#">珠宝</a></li>
                                            <li class="items_list_nav"style="width: 20%;"><a href="#