这篇文章给大家分享的是有关如何使用css实现旧版京东网站导航的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

　　div 高度+ div底部边框高度，底部边框颜色设置红色。版心div里两个子级div左浮动。左侧导航分类上部用div.dt 下部用div.dd，它们之间是兄弟关系。

　　知识点：li里面的字数不一样多，不能给宽度，直接让左右padding撑开宽度。

　　html结构：

<!--导航begin--><divclass="nav"><divclass="w"><divclass="dropdownfl"><divclass="dt">全部商品分类</div><divclass="dd"><ul><liclass="menu_item"><ahref="">家用电器</a><i></li><liclass="menu_item"><ahref="">手机/运营商/数码</a><i></li><liclass="menu_item"><ahref="">电脑/办公</a><i></li><liclass="menu_item"><ahref="">家居/家具/家装/厨具</a><i></li><liclass="menu_item"><ahref="">男装/女装/童装/内衣</a><i></li><liclass="menu_item"><ahref="">美妆/个护清洁/宠物</a><i></li><liclass="menu_item"><ahref="">女鞋/箱包/钟表/珠宝</a><i></li><liclass="menu_item"><ahref="">男鞋/运动/户外</a><i></li><liclass="menu_item"><ahref="">房产/汽车/汽车用品</a><i></li><liclass="menu_item"><ahref="">母婴/玩具乐器</a><i></li><liclass="menu_item"><ahref="">食品/酒类/生鲜/特产</a><i></li><liclass="menu_item"><ahref="">艺术/礼品鲜花/农资绿植</a><i></li><liclass="menu_item"><ahref="">医药保健/计生情趣</a><i></li><liclass="menu_item"><ahref="">图书/文娱/教育/电子书</a><i></li><liclass="menu_item"><ahref="">机票/酒店/旅游/生活</a><i></li></ul></div></div><divclass="navitemsfl"><ul><li><ahref="">服装城</a></li><li><ahref="">美妆馆</a></li><li><ahref="">服装城</a></li><li><ahref="">全球购</a></li><li><ahref="">闪购</a></li><li><ahref="">团购</a></li><li><ahref="">拍卖</a></li><li><ahref="">金融</a></li><li><ahref="">有趣</a></li></ul></div></div></div><!--导航end-->　　css代码：

/*导航*/.nav{height:45px;border-bottom:2pxsolid#b1191a;}.dropdown{width:209px;height:45px;}.dropdown.dt{width:100%;height:100%;background-color:#B1191A;font-size:16px;color:#fff;text-align:center;line-height:45px;}.dropdown.dd{height:465px;background-color:#C81623;margin-top:2px;}.menu_itemi{font-family:'icomoon';float:right;font-size:18px;color:#fff;}.menu_item{height:31px;line-height:31px;padding:010px;margin-left:1px;}.menu_item:hover{background-color:#fff;}.menu_item:hovera{/*鼠标经过lia里字体变色*/color:#C81623;;}.menu_itema{font-size:14px;color:#FFFFFF;}.navitemsli{float:left;}.navitemslia{display:block;height:45px;padding:025px;line-height:45px;font-size:16px;}.navitems{margin-left:10px;}

感谢各位的阅读！关于“如何使用css实现旧版京东网站导航”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！