因为想给一级菜单设置一个半透明的背景(这个版透明背景在有背景图的情况下是可以穿透的显示背景图的)。所以单独用一个名为bg的盒子去装载这一个背景层。 设置的时候 背景色使用rgba可以调节背景图的透明度,额外的opacity可以在原基础上再进一步的调节透明度。
先设置主菜单,因为每一个菜单项,都要绑定一个onmouseover事件,所以每一个一级菜单都要用一个div盒子装载起来(nav) 为了能够调节主菜单的大小 把他装在一个main盒子里面 nav下面设置line盒子为的是划线
二级菜单是一个有很多共同样式,但是又繁琐的一部分。sub盒子是整个二级菜单的大盒子 sub-menu是装载二级菜单文字内容的盒子,inner-box是装载每一个二级菜单文字的盒子。在这里需要设置3个二级菜单页面,但是因为样式一致,写好第一个样式,复制过去形成1,2,3个二级菜单页面,这里使用一个特殊的属性,overflow:hidden使得多余部分的二级菜单被隐藏,这个时候会显示第一个子菜单(a开头那页)。在这里:拥有overflow:hidden样式的块元素,不能具有position:relative和position:absolute样式 。所以这个overflow:hidden是添加在sub-menu和inner-box上面的就不会使得inner-box和sub-menu向下移20px的距离了。一开始是以为background无法铺满整个盒子导致的,检查元素后发现只是它的盒子下移,又被overflow:hidden掉了。
下面补充使得图片平铺满盒子的方法:
background-image: url('img/bg.jpg');
background-repeat: no-repeat;
ba