仿京东商品分类导航
看一看最终的效果:
下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。
我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告)
因为我是用 纯css+html写的， 所以它的文件有:京东导航.html,main.css,cssreset.css(css文件放在css这个目录下面).
接着我们看具体的代码实现(这里我只写了家用电器的二级分类)：
京东导航.html
main.css
/* CSS Document */
nav{
position:absolute;
left:100px;
top:100px;
border:1px solid #b61d1d;
}
/*全部商品分类*/
.all{
width:190px;
height:44px;
line-height:44px;
background:#b1191a;
padding:0 10px;
}
.all a{
color:white;
font-size:16px;
}
/*导航菜单*/
.nav_item{
width:190px;
height:31px;
line-height:31px;
color:white;
background:#b61d1d;
padding:0 10px;
}
ul li a{color:white;}
.jt{
color:white;
float:right;
width:12px;
padding-top:10px;
font: 13px consolas;
}
/*hover*/
ul li:hover {
background:white;
}
ul li:hover a{
color:#b61d1d;
}
/*submenu*/
.sub_menu{
display:none;
width:790px;
position:absolute;
left:210px;
top:44px;
background:#f7f7f7;
}
ul li:hover .sub_menu{display:block;}
.leftmenu{
width: 550px;
overflow:hidden;
float:left;
}
.leftmenu dl{
overflow:hidden;
display:block;
margin: 20px 0;
}
.leftmenu dl dt{
float:left;
font-weight:bold;
color:#737373;
padding:0 8px;
}
.leftmenu dl dd a{
color: #737373;
float:left;
height:20px;
line-height:20px;
padding:0 10px;
border-left: 1px solid #e0e0e0;
font-size:12px;
margin-top:5px;
}
.rightmenu{
float:right;
}
.rightmenu dl {
margin-top:20px;
}
.rightmenu dl dd {
padding:0;
margin-bottom:2px;
}
cssreset.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
border: none;
font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";
font-size: 14px;
}
ol,ul{
list-style: none;
}
fieldset,img{
border:0;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
a{
text-decoration: none;
color: #737373;
}
img, iframe {
border: none;
text-decoration:none;
}
---------------------
作者：Jy_code
来源：CSDN
原文：https://blog.csdn.net/sunyuan_software/article/details/46425575
版权声明：本文为博主原创文章，转载请附上博文链接！