设置两个样式,一个是.curr 一个是li.hover 第一个是控制当前栏目,比如说当前是门户这个页面,那么门户这个li 的class就是curr 还有一个就是鼠标滑过的时候显示白色背景,这个用li:hover来控制,这两个是相同的css代码。都是改变一下背景图片,控制一下超文本链接颜色。
我大概看了一下你的代码。 我觉得怎么挺简单的事,咋被弄的这么复杂。
在我看就需要这几个样式就行了。
//父容器
.main{display:blockwidth:666pxposition:absolutetop:36pxright: 0pxz-index:300}
//导航栏容器
.main .menu{ height:40px}
//导航内容分层
.main .menu li{ widht:105pxfloat:left}
//被选中样式
.main .menu .curr{}
//第一个内容分层样式
.main .menu .friest{}
//最后一个内容分层样式
.main .menu .last{}
//鼠标滑过效果
.main .menu li:hover{}
这几个样式就足够。
background-repeat: no-repeat /* 不平铺 */然后是铺满容器的问题,如果忽略IE内核的浏览器,用css3属性background-size: 100%轻松解决,要兼容的话可以设一个背景层放在容器的下方,背景层里面放你的背景图片,宽高设为跟容器一样,然后把容器的背景设为透明即可。
body{background:#FFF url(背景图片地址) no-repeat 50% 0}no-repeat不重复
50% 0(水平位置 垂直位置) 水平50%既居中,垂直0px
center center也可