接下来开始做下面的部分，包括红色背景部分、导航菜单栏、右边的图片，如图：

图1

分析：

1.构架：全部商品分类是一个盒子、导航菜单是一个盒子，图片是一个盒子。 2.点击红色部分会出现下拉列表，从语义上讲它是定义列表。 3.导航菜单栏上有绿色小图标

先做全部商品分类部分：

HTML代码：

CSS代码：

效果1：

效果2：

导航菜单用无序列表做。

HTML代码：

CSS代码：

效果3：

效果4：

附上效果4上边的绿色图标：

插入右边的图片 右边的图片紧靠右侧版心，所以是右浮动。点击图片可以进入活动主页，里面应该包含一个a标签。 附上图片：

HTML代码：

CSS代码：

效果5：

在做导航菜单使已经做了一部分下拉列表，就是有红色背景的“全部商品分类”。这节重点说下拉列表的做法。 原理： 父盒子无法装下子盒子，子盒子会溢出。 分析样本图，从语义上讲“全部商品分类”和下面的列表是意义有关联，应该归入一个盒子。但是第二个盒子的显现又不是静态的。当它出现的时候，覆盖住下面的内容，当不出现的时候不占空间。要做出这样的效果，可以利用盒子溢出原理，因为隐藏溢出不占用空间。这样，后面就可以利用JS做交互效果：当点击第一个儿子，就overflow：visible；当鼠标离开时，overflow：hidden。 所以，处理这个案例时，就可以使第一个盒子的宽高和父盒子相同，第二个子盒子完全溢出父盒子外。

HTML代码：

下拉效果1：

CSS代码：

下拉效果2： 下拉效果3：

下拉效果4：

好啦！导航菜单和下拉列表已经完成了，至此，京东网页也完成了一小半，成果如下图，感受一下，嘻嘻~：

谢谢大家,欢迎指正!欲知后事如何，且听明天分解。晚安！